- 指定如何重復背景圖像,默認情況下,重復background-image的垂直和水平方向.
- repat 背景圖像將向垂直和水平方向重復,這是默認
- repat-x只有水平位置會重復背景圖像
- repat-y只有垂直位置會重復背景圖像
- no-repat代表background-image不會重復
- inherit 指定background-repat屬性設置應該從父元素繼承
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>background-repat背景重復</title> 6 <style type="text/css"> 7 .logo{ 8 width: 300px; 9 height: 300px; 10 background-image: url(http://www.zhufengpeixun.cn/skin/20142/img/logo1.png); 11 background-repeat: repeat-x; 12 } 13 .nav{ 14 width: 100%; 15 height: 42px; 16 /*拆分的寫法*/ 17 /* background-image: url(http://www.zhufengpeixun.cn/skin/20142/img/navbj.png); 18 background-repeat: repeat-x; */ 19 /*復合寫法:簡寫*/ 20 background: url(http://www.zhufengpeixun.cn/skin/20142/img/navbj.png) repeat-x; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="logo"></div> 26 <div class="nav"></div> 27 </body> 28 </html>
background-repat:背景重復(平鋪的方式);默認值repat(x/y軸同時平鋪);no-repat不平鋪(不重復)repat-x平鋪方式:x軸平鋪
補充:由於導航nav的背景正好42px,所以即便我們不寫repat-x,它也只有X軸方向的平鋪,因為Y軸沒有多的高度去平鋪;但是如果height和navbj的高度不相等話,我們不寫background-repat會出現除了X軸平鋪之外,也會看到Y軸平鋪效果,所以我們最好在background圖片的后面緊跟指明平鋪的方式!
background-color/background-iamge可簡寫為background,background-repat不能簡寫為background