網(wǎng)站建設(shè)中利用background-repeat,可以把一個大圖像放在文檔的背景中,然后使之一直重復(fù)。在此基礎(chǔ)上,下面來看如何改變圖像在背景中的位置。
例如,可以在body元素中將一個背景圖像居中放置,其結(jié)果如圖9-21所示:
body{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;
background-position:center;}
這里在背景上放了一個圖像,然后使用值no-repeat使之不能重復(fù)。每個包含圖像的背景都從一個圖像開始,再根據(jù)background-repeat的值重復(fù)(或不重復(fù))。這個起點稱為原圖像(origin image)。
background-position值:[[<percentage>|<length>|left | center | right][<percentage>]|<length>I top | center | bottom]?]||[[left|center | right]||[top | center | bottom]]I inherit
初始值:0%0%
應(yīng)用于:塊級元素和替換元素
繼承性:無
百分數(shù):相對于元素和原圖像上的相應(yīng)點(見本章后面“百分數(shù)值”一節(jié)的解釋)
計算值:如果指定了<length>,則為絕對長度偏移,否則,是百分數(shù)值
網(wǎng)站建設(shè)原圖像的放置由backgroimd-position屬性決定,為這個屬性提供值有很多方法。首先,網(wǎng)頁設(shè)計人員可以使用一些關(guān)鍵字:top、bottom,left,right和center。通常,這些關(guān)鍵字會成對出現(xiàn),不過(如前面的例子所示)也并不總是這樣。還可以使用長度值,如50px或2cm,最后也可以使用百分數(shù)值。不同類型的值對于背景圖像的放置稍有差別。
還要提到一點:這就是放置背景圖像的上下文。網(wǎng)站建設(shè)CSS2和CSS2.1指出,網(wǎng)頁設(shè)計人員根據(jù)background-position,將相對于元素的內(nèi)邊距邊界放置原圖像。換句話說,放置圖像的上下文是內(nèi)邊框邊界,盡管背景區(qū)會延伸到外邊框邊界。并非所有瀏覽器都能正確地放置圖像,有些瀏覽器就會相對于外邊框邊界而不是內(nèi)邊框邊界來放置原圖像。不過如果沒有邊框,無論是哪一種瀏覽器,效果都是一樣的。
注意:如果有人想了解多年來CSS有什么改變,可以告訴你,CSS1相對于內(nèi)容區(qū)定義圖像的放置。
盡管有圖像放置的上下文,不過完全平鋪的背景圖像確實會填充邊框區(qū)的背景,因為平鋪圖像會在4個方向上延伸。稍后會更詳細地討論這一點。首先,需要了解原圖像在元素中如何定位。