background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數:
repeat : 背景圖像在縱向和橫向上平鋪
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
說明:
設置或檢索對象的背景圖像是否及如何鋪排。必須先指定對象的背景圖像。
對應的腳本特性為backgroundRepeat。請參閱我編寫的其他書目。
示例:
menu { background: url( images/aardvark.gif background-repeat: repeat-y; } p { background: url( images/aardvark.gif background-repeat: no-repeat; }這里有一張25px×25px的圖片,我們設置3個div元素為200px×100px,并且把div元素背景圖像設置為該圖片。

!DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml head title background-repeat屬性 /title style type= text/css /*設置div元素的共同樣式*/ width:200px; height:100px; background-image:url( ../App_images/lesson/run_cj/flower.jpg text-align:center; border:1px dashed gray; /*設置3個div元素的個別樣式*/ #div2{background-repeat:repeat-x;} #div3{background-repeat:repeat-y;} #div4{background-repeat:no-repeat;} hr{border-color:red;} /style /head body div id= div1 h3 靜夜思 /h3 p 窗前明月光,疑似地上霜。 br/ 舉頭望明月,低頭思故鄉。 /p /div hr/ div id= div2 h3 靜夜思 /h3 p 窗前明月光,疑似地上霜。 br/ 舉頭望明月,低頭思故鄉。 /p /div hr/ div id= div3 h3 靜夜思 /h3 p 窗前明月光,疑似地上霜。 br/ 舉頭望明月,低頭思故鄉。 /p /div hr/ div id= div4 h3 靜夜思 /h3 p 窗前明月光,疑似地上霜。 br/ 舉頭望明月,低頭思故鄉。 /p /div /body /html
在瀏覽器預覽效果如下:

分析:
因為第一個div元素沒有設置background-repeat屬性值,因為瀏覽器會采用background-repeat默認值“repeat”,背景圖片會在水平和垂直兩個方向同時平鋪。第二個div元素background-repeat屬性值為“repeat-x”,因此背景圖片會在水平方向(x軸)平鋪。第三個div元素background-repeat屬性值為“repeat-y”,因此背景圖片會在垂直方向(y軸)平鋪
大家可能對hr元素的屬性設置很奇怪,為什么設置hr的border-color屬性值為red,hr的顏色就會改變,而不是設置hr的color屬性為red或者background-color為red呢?這跟hr本身特點有關,在CSS進階“hr的CSS設置”這一節我們會詳細講解到。
注意:設置有背景圖片的元素的寬或高大于背景圖片本身的寬或高,才會有平鋪效果。
以上就是css中background-repeat屬性如何使用的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答