過去，如果網(wǎng)站建設(shè)人員想要某種“邊欄式（sidebar）”背景，必須創(chuàng)建一個很短但非常寬的圖像放在背景上。有一段時間，這種圖像的最佳大小是10像素高1,500像素寬。當(dāng)然，圖像的大部分都是空白，只有左邊100像素左右包含“邊欄”圖像。圖像的余下部分基本上都被浪費(fèi)了。
如果能創(chuàng)建一個只有10像素高100像素寬的邊欄圖像，而沒有浪費(fèi)的空白空間，然后只在垂直方向上重復(fù)這個圖像，這樣不是更高效嗎？這肯定會讓網(wǎng)頁設(shè)計者的設(shè)計工作容易一些，而且用戶的下載也會快得多。下面來看background-repeat。
background-repeat值：
repeat | repeat-x | repeat-y | no-repeat | inherit
初始值：repeat
應(yīng)用于：所有元素
繼承性：無
計算值：根據(jù)指定確定
你可能猜得到，repeat導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x和repeat-y分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat則不允許圖像在任何方向上平鋪。
默認(rèn)地，背景圖像將會從一個元素的左上角開始（本章后面將介紹如何改變這種默認(rèn)行為）。因此，以下規(guī)則將得到如圖9-17所示的結(jié)果：
body {background-image: url(yinyang.gif);
background-repeat: repeat-y;}
圖9-17：垂直平鋪背景圖像
（為了讓規(guī)則盡量簡短，這里省略了背景顏色，不過要記住，只要有背景圖像就應(yīng)該同時包含一個背景顏色。）
不過，假設(shè)網(wǎng)頁設(shè)計者希望圖像在文檔的頂端重復(fù)。不必為此創(chuàng)建一個特殊圖像，使其下面全部都是空白，只需對規(guī)則做一個小改動：
body{background-image:url(yinyang.gif)；
background-repeat:repeat-x;}
如圖9-18所示，這個圖像會從其起點沿著x軸重復(fù)（也就是水平重復(fù)），在這里就是從瀏覽器窗口的左上角開始水平重復(fù)。
最后，你可能根本不希望重復(fù)背景圖像。在這種情況下，可以使用值no-repeat:
body{background-image:url(yinyang.gif)；background-repeat:no-repeat;)
這個值看上去可能用處不大，因為這個聲明只會把一個小圖像放在文檔的左上角，不過再來看一個大得多的符號，如圖9-19所示：
body{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;}
圖9-18：水平平鋪
圖9-19：放一個大背景圖像
由于能控制重復(fù)方向，這使得可能達(dá)到的效果大大增加。例如，假設(shè)網(wǎng)頁設(shè)計者希望文檔中每個h1元素的左邊有一個三重邊框。可以把這個概念再進(jìn)一步，在每個h2元素的頂端設(shè)置一個波浪線邊框。圖像采用特定方式著色，使之能與背景色混合，得到圖9-20所示的波浪效果：
h1{background-image:url(Criplebor.gif);background-repeat:repeat-y;}
h2{background-image:url(wavybord.gif);background-repeat:repeat-x;background-color:#CCC;}
圖9-20：對有背景圖像的元素加邊框
僅僅通過選擇適當(dāng)?shù)膱D像，并用某種創(chuàng)造性的方式加以使用，就可以創(chuàng)建一些非常有意思的效果。還不僅如此。既然你已經(jīng)知道了如何限制一個背景圖像的重復(fù)，那么如何讓它在背景區(qū)內(nèi)移動呢？
當(dāng)前文章標(biāo)題：網(wǎng)頁設(shè)計中的方向重復(fù)
當(dāng)前URL：http://www.u58td.cn/news/wzzz/background-repeat.html
