網(wǎng)站建設(shè)中百分?jǐn)?shù)值與關(guān)鍵字緊密相關(guān)，不過(guò)其表現(xiàn)方式更為復(fù)雜。假設(shè)網(wǎng)站建設(shè)人員希望用百分?jǐn)?shù)值將原圖像在其元素中居中。這很容易：
p{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;
background-position:50% 50%;}
這會(huì)導(dǎo)致原圖像適當(dāng)放置，其中心與其元素的中心對(duì)齊。換句話說(shuō)，百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和原圖像。
下面更詳細(xì)地分析這個(gè)過(guò)程。將原圖像在一個(gè)元素中居中時(shí)，圖像中描述為50% 50%的點(diǎn)（中心點(diǎn)）與元素中描述為50% 50%的點(diǎn)（中心點(diǎn)）對(duì)齊。如果圖像位于0%0%,
其左上角將放在元素內(nèi)邊厙區(qū)的左上角。如果圖像位置是100% 100%，會(huì)使原圖像的右下角放在內(nèi)邊距區(qū)的右下角：
p{background-image:url(oransqr.gif)；background-repeat:no-repeat;
padding:Spx;border:1px dotted gray;}
p.cl{background-position:0%0%;}
p.c2(background-position:50%50%;}
p.c3{background-position:100%100%;}
p.c4{background-position:0%100%;}
p.c5{background-position:100%0%;}
因此，如果網(wǎng)頁(yè)設(shè)計(jì)者想將一個(gè)原圖像放在水平方向1/3。垂直方向2/3處，可以聲明如下：
p{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;
background-positiori:33% 66%;}
利用這些規(guī)則，原圖像中從圖像左上角水平向右1/3、垂直向下2/3處的點(diǎn)將與離包含元素左上角最遠(yuǎn)的點(diǎn)對(duì)齊。注意，如果用百分?jǐn)?shù)設(shè)置位置，水平值總是先出現(xiàn)。如果在上例中將百分?jǐn)?shù)值的順序換一下，圖像將放在元素中水平向右2/3、垂直向下丨/3處。
如果只提供了一個(gè)百分?jǐn)?shù)值，所提供的這個(gè)值將用作為水平值，垂直值假設(shè)為50%，這與關(guān)鍵字類似，即如果只指定了一個(gè)關(guān)鍵字，另一個(gè)關(guān)鍵字則假設(shè)為center。例如：
p(background-image:url(yinyang.gif)；
background-repeat:no-repeat;
background-position:25%;}
原圖像位于元素內(nèi)容區(qū)和內(nèi)邊距區(qū)水平向右1/4，垂直向下1/2處。
等價(jià)關(guān)鍵字
等價(jià)百分?jǐn)?shù)
center
center center
50% 50%
50%
top
top center
center top
50% 0%
bottom
bottom center
center bottom
50% 100%
right
center right
100% 50%
right center
100%
left
center left
0% 50%
left center
0%
top left
left top
0% 0%
top right
right top
100% 0%
bottom right
right bottom
100% 100%
bottom left
left bottom
0% 100%
你在建設(shè)網(wǎng)站可能會(huì)奇怪，background-position的默認(rèn)值是0% 0%，這在功能上就相當(dāng)于top left。正是因?yàn)檫@個(gè)原因，背景圖像總是從元素內(nèi)邊距區(qū)的左上角開(kāi)始平鋪，除非你設(shè)置了不同的位置值。