網(wǎng)站建設(shè)中利用background-repeat，可以把一個(gè)大圖像放在文檔的背景中，然后使之一直重復(fù)。在此基礎(chǔ)上，下面來(lái)看如何改變圖像在背景中的位置。

例如，可以在body元素中將一個(gè)背景圖像居中放置，其結(jié)果如圖9-21所示：

body{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-position:center;}

這里在背景上放了一個(gè)圖像，然后使用值no-repeat使之不能重復(fù)。每個(gè)包含圖像的背景都從一個(gè)圖像開(kāi)始，再根據(jù)background-repeat的值重復(fù)（或不重復(fù)）。這個(gè)起點(diǎn)稱為原圖像（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)用于：塊級(jí)元素和替換元素

繼承性：無(wú)

百分?jǐn)?shù)：相對(duì)于元素和原圖像上的相應(yīng)點(diǎn)（見(jiàn)本章后面“百分?jǐn)?shù)值”一節(jié)的解釋）

計(jì)算值：如果指定了<length>，則為絕對(duì)長(zhǎng)度偏移，否則，是百分?jǐn)?shù)值

網(wǎng)站建設(shè)原圖像的放置由backgroimd-position屬性決定，為這個(gè)屬性提供值有很多方法。首先，網(wǎng)頁(yè)設(shè)計(jì)人員可以使用一些關(guān)鍵字：top、bottom,left,right和center。通常，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，不過(guò)（如前面的例子所示）也并不總是這樣。還可以使用長(zhǎng)度值，如50px或2cm，最后也可以使用百分?jǐn)?shù)值。不同類型的值對(duì)于背景圖像的放置稍有差別。

還要提到一點(diǎn)：這就是放置背景圖像的上下文。網(wǎng)站建設(shè)CSS2和CSS2.1指出，網(wǎng)頁(yè)設(shè)計(jì)人員根據(jù)background-position，將相對(duì)于元素的內(nèi)邊距邊界放置原圖像。換句話說(shuō)，放置圖像的上下文是內(nèi)邊框邊界，盡管背景區(qū)會(huì)延伸到外邊框邊界。并非所有瀏覽器都能正確地放置圖像，有些瀏覽器就會(huì)相對(duì)于外邊框邊界而不是內(nèi)邊框邊界來(lái)放置原圖像。不過(guò)如果沒(méi)有邊框，無(wú)論是哪一種瀏覽器，效果都是一樣的。

注意：如果有人想了解多年來(lái)CSS有什么改變，可以告訴你，CSS1相對(duì)于內(nèi)容區(qū)定義圖像的放置。

盡管有圖像放置的上下文，不過(guò)完全平鋪的背景圖像確實(shí)會(huì)填充邊框區(qū)的背景，因?yàn)槠戒亪D像會(huì)在4個(gè)方向上延伸。稍后會(huì)更詳細(xì)地討論這一點(diǎn)。首先，需要了解原圖像在元素中如何定位。