有方向的重復（深入）

在前面關(guān)于重復的一節中，我們介紹了值repeat-x、repeat-y和repeat，并說(shuō)明了它們在網(wǎng)站建設中對背景圖像的平鋪有何影響。不過(guò)，對于這些值，平鋪模式總是從包含元素（例如P）的左上角開(kāi)始。當然，并不要求如此，我們已經(jīng)看到，background-position的默認值是0% 0%。所以，除非改變原圖像的位置，否則平鋪就會(huì )從左上角開(kāi)始。不過(guò)，既然網(wǎng)站建設人員知道了如何改變原圖像的位置，接下來(lái)需要了解用戶(hù)代理如何處理這種情況。

要介紹這個(gè)內容，最容易的辦法就是先提供一個(gè)例子，再作相應的解釋?？紤]以下標記，其結果如圖9-30所示：

P{background-image:url(yinyang.gif)；background-position:center;border:1px dotted gray;}

p.cl(background-repeat:repeat-y;)

p.c2(background-repeat:repeat-x;)

圖9-30：居中原圖像并重復

可以看到結果：“圖條”穿過(guò)了元素的中心?？瓷先タ赡懿粚?，但這并沒(méi)有錯。

圖9-30所示的例子是正確的，因為原圖像放在第一個(gè)p元素的中心，然后沿著(zhù)y軸在兩個(gè)方向上平鋪，換句話(huà)說(shuō)，同時(shí)向上和向下平鋪。對于第二個(gè)段落，圖像則分別向右和向左重復。

因此，將一個(gè)大圖像設置在P的中心，再讓它充分重復，將導致它在4個(gè)方向上都平鋪，即向上、向下、向左和向右。background-position造成的唯一差別是確定平鋪從哪里開(kāi)始。圖9-31顯示了從元素中心平鋪和從元素左上角平鋪的差別，

注意元素各邊界上的差別。當背景從中心重復時(shí)（如第一段中），陰陽(yáng)符號網(wǎng)格在元素內居中，這會(huì )在各邊界上得到一致的“剪裁”效果。在第二段中，平鋪從內邊距區左上角開(kāi)始，所以剪裁是不一致的?？瓷先ゲ顒e可能很小，不過(guò)在網(wǎng)站建設人員的設計生涯中，這兩種方法都很可能需要用到。

圖9-31：從中心重復和從左上角重疊的差別

如果網(wǎng)頁(yè)設計師還想知道其他控制重復的方法，需要指出，除了前面討論的再沒(méi)有別的方法了。例如，不存在repeat-left，不過(guò)可能CSS的某個(gè)將來(lái)版本中會(huì )增加這樣的值。對現在來(lái)說(shuō)，全部方法就是這些，只能水平平鋪、垂直平鋪，或者根本不平鋪。