在前面關(guān)于重復(fù)的一節(jié)中,我們介紹了值repeat-x、repeat-y和repeat,并說(shuō)明了它們?cè)?a href="http://m.iy5y368.cn" target="_self" title="云南網(wǎng)站建設(shè)">網(wǎng)站建設(shè)中對(duì)背景圖像的平鋪有何影響。不過(guò),對(duì)于這些值,平鋪模式總是從包含元素(例如P)的左上角開始。當(dāng)然,并不要求如此,我們已經(jīng)看到,background-position的默認(rèn)值是0% 0%。所以,除非改變?cè)瓐D像的位置,否則平鋪就會(huì)從左上角開始。不過(guò),既然網(wǎng)站建設(shè)人員知道了如何改變?cè)瓐D像的位置,接下來(lái)需要了解用戶代理如何處理這種情況。
要介紹這個(gè)內(nèi)容,最容易的辦法就是先提供一個(gè)例子,再作相應(yīng)的解釋??紤]以下標(biāo)記,其結(jié)果如圖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:居中原圖像并重復(fù)
可以看到結(jié)果:“圖條”穿過(guò)了元素的中心??瓷先タ赡懿粚?duì),但這并沒(méi)有錯(cuò)。
圖9-30所示的例子是正確的,因?yàn)樵瓐D像放在第一個(gè)p元素的中心,然后沿著y軸在兩個(gè)方向上平鋪,換句話說(shuō),同時(shí)向上和向下平鋪。對(duì)于第二個(gè)段落,圖像則分別向右和向左重復(fù)。
因此,將一個(gè)大圖像設(shè)置在P的中心,再讓它充分重復(fù),將導(dǎo)致它在4個(gè)方向上都平鋪,即向上、向下、向左和向右。background-position造成的唯一差別是確定平鋪從哪里開始。圖9-31顯示了從元素中心平鋪和從元素左上角平鋪的差別,
注意元素各邊界上的差別。當(dāng)背景從中心重復(fù)時(shí)(如第一段中),陰陽(yáng)符號(hào)網(wǎng)格在元素內(nèi)居中,這會(huì)在各邊界上得到一致的“剪裁”效果。在第二段中,平鋪從內(nèi)邊距區(qū)左上角開始,所以剪裁是不一致的。看上去差別可能很小,不過(guò)在網(wǎng)站建設(shè)人員的設(shè)計(jì)生涯中,這兩種方法都很可能需要用到。
圖9-31:從中心重復(fù)和從左上角重疊的差別
如果網(wǎng)頁(yè)設(shè)計(jì)師還想知道其他控制重復(fù)的方法,需要指出,除了前面討論的再?zèng)]有別的方法了。例如,不存在repeat-left,不過(guò)可能CSS的某個(gè)將來(lái)版本中會(huì)增加這樣的值。對(duì)現(xiàn)在來(lái)說(shuō),全部方法就是這些,只能水平平鋪、垂直平鋪,或者根本不平鋪。