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教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。