【CSS3】CSS3背景相关属性大全
生活随笔
收集整理的這篇文章主要介紹了
【CSS3】CSS3背景相关属性大全
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
基本背景屬性の使用
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景屬性</title><style type="text/css">div {border: 1px solid #000;height: 100px;width: 300px;}</style></head><body><!--綠色背景--><div style="background-color:#92e900;">background-color:#92e900</div><!--以默認(rèn)樣式指定背景圖片，將會(huì)在橫向、縱向上平鋪--><div style="background-image:url(dog.jpg);">background-image:url(dog.jpg)</div><!--不平鋪的背景圖片--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;">background-image:url(dog.jpg)background-repeat:no-repeat</div><!--僅橫向平鋪的背景圖片--><div style="background-image:url(dog.jpg);background-repeat:repeat-x;">background-image:url(dog.jpg)background-repeat:repeat-x</div><!--不平鋪的背景圖片，并指定背景圖片位置--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:35% 80%;">background-image:url(dog.jpg)background-repeat:no-repeatbackground-position:35% 80%</div><!--不平鋪的背景圖片，并指定背景圖片位置--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:30px 8px;">background-image:url(dog.jpg)background-repeat:no-repeatbackground-position:30px 8px</div><!--不平鋪的背景圖片，并指定背景圖片位置--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:center bottom;">background-image:url(dog.jpg)background-repeat:no-repeatbackground-position:center bottom</div></body> </html>背景圖片的固定
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景固定</title></head><body style="background-image:url(dog.jpg); background-attachment:fixed"><ul style="font-size:30pt;color:red"><script type="text/javascript">for (var i = 0; i < 20; i++) {document.writeln("<li>這柴犬顏色有點(diǎn)深啊</li>");}</script></ul></body> </html>CSS3新增的background-clip屬性の使用
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景屬性</title><style type="text/css">div {border: 10px dotted #444;padding: 12px;height: 30px;width: 300px;}</style></head><body><!--粉色背景--><div style="background-color:#ff6aa1;">background-color:#ff6aa1</div><!--以默認(rèn)樣式指定背景圖片，將會(huì)在橫向、縱向上平鋪--><div style="background-image:url(dog.jpg);">background-image:url(dog.jpg)</div><!--指定背景覆蓋盒模型的邊框區(qū)、內(nèi)填充區(qū)、內(nèi)容區(qū)--><div style="background-image:url(dog.jpg);background-clip:no-clip;">background-image:url(dog.jpg)background-clip:no-clip</div><!--指定背景覆蓋盒模型的內(nèi)填充區(qū)、內(nèi)容區(qū)--><div style="background-image:url(dog.jpg);background-clip:padding-box;">background-image:url(dog.jpg)background-clip:padding-box</div><!--指定背景覆蓋盒模型的內(nèi)容區(qū)--><div style="background-image:url(dog.jpg);background-clip:content-box;">background-image:url(dog.jpg)background-clip:content-box</div></body> </html>CSS3新增的background-origin屬性の使用
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景屬性</title><style type="text/css">div {border: 12px dotted #444;height: 120px;width: 300px;}</style></head><body><!--柚色背景--><div style="background-color:#ff6a51;">background-color:#ff6a51</div><!--背景圖片從內(nèi)容區(qū)開始覆蓋--><div style="background-image:url(dog.jpg);background-origin:content-box;background-repeat:no-repeat;">background-image:url(dog.jpg)background-origin:content-boxbackground-repeat:no-repeat</div><!--背景圖片從內(nèi)填充區(qū)開始覆蓋--><div style="background-image:url(dog.jpg);background-origin:padding-box;background-repeat:no-repeat;">background-image:url(dog.jpg)background-origin:padding-boxbackground-repeat:no-repeat</div><!--背景圖片從邊框區(qū)開始覆蓋--><div style="background-image:url(dog.jpg);background-origin:border-box;background-repeat:no-repeat;">background-image:url(dog.jpg)background-origin:border-boxbackground-repeat:no-repeat</div></body> </html>CSS3新增的background-size屬性の使用
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景屬性</title><style type="text/css">div {border: 12px dotted #444;height: 70px;width: 300px;}</style></head><body><!--以默認(rèn)樣式指定背景圖片，將會(huì)在橫向、縱向上平鋪--><div style="background-image:url(dog.jpg);">background-image:url(dog.jpg)</div><!--背景圖片寬度與元素寬度相同、高度為元素高度的80%--><div style="background-image:url(dog.jpg);background-size:100% 80%;">background-image:url(dog.jpg)background-size:100% 80%</div><!--背景圖片寬度為元素寬度的30%、高度保持縱橫比縮放--><div style="background-image:url(dog.jpg);background-size:30% auto">background-image:url(dog.jpg)background-size:30% auto</div><!--背景圖片寬度保持縱橫比縮放、高度為元素高度的50%--><div style="background-image:url(dog.jpg);background-size:auto 50%;">background-image:url(dog.jpg)background-size:auto 50%</div><!--背景圖片寬度為60px、高度為30px--><div style="background-image:url(dog.jpg);background-size:60px 30px;">background-image:url(dog.jpg)background-size:60px 30px</div><!--背景圖片寬度為40px、高度保持縱橫比縮放--><div style="background-image:url(dog.jpg);background-size:40px auto;">background-image:url(dog.jpg)background-size:40px auto</div><!--背景圖片寬度保持縱橫比縮放、高度為20px--><div style="background-image:url(dog.jpg);background-size:auto 20px;">background-image:url(dog.jpg)background-size:auto 20px</div></body> </html>CSS3為background-repeat新增的space和roundの使用
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景屬性</title><style type="text/css">div {height: 150px;width: 300px;background-image:url(dog.jpg);}</style></head><body>換行警告<!--以默認(rèn)樣式指定背景圖片，將會(huì)在橫向、縱向上平鋪--><div>background-image:url(dog.jpg)</div>換行警告<!--不平鋪的背景圖片--><div style="background-repeat:round;">background-image:url(dog.jpg)background-repeat:round</div>換行警告<!--僅橫向平鋪的背景圖片--><div style="background-repeat:space;">background-image:url(dog.jpg)background-repeat:space</div></body> </html>CSS3新增的多背景圖片の使用
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景屬性</title><style type="text/css">div {border:1px solid #000;height:200px;width:500px;background-image: url(dog.jpg), url(dog2.jpg), url(dog3.jpg);background-repeat: repeat-y, repeat-x, repeat;background-position: center top, left bottom, left top;}</style></head><body><div id="div"></div></body> </html>圖片使用——柴犬
dog.jpg
dog2.jpg
dog3.jpg
總結(jié)
以上是生活随笔為你收集整理的【CSS3】CSS3背景相关属性大全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 离散结构：图论进阶
- 下一篇： 面积计算（洛谷P5681题题解，Java