最后，我們來看定位的長度值。在為原圖像的位置提供長度值時，這些長度值將解釋為從元素內(nèi)邊距區(qū)左上角的偏移。偏移點是原圖像的左上角。因此，如果網(wǎng)站建設(shè)人員設(shè)置值為20px 30px，原圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右20像素，向下30像素的位置上，如圖9-25所示：
p{background-image:url(yinyang.gif);
background-repeat:no-repeat;
background-position:20px 30px;
border:1px dotted gray;}
圖9-25：使用長度度設(shè)置背景圖像的偏移
這與網(wǎng)頁設(shè)計中百分?jǐn)?shù)值大不相同，因為偏移只是從一個左上角到另一個左上量角的偏移。換句話說，原圖像的左上角與background-position聲明中指定的點對齊。不過，網(wǎng)頁設(shè)計師可以結(jié)合使用長度和百分?jǐn)?shù)值，得到“二者兼俱”的效果。假設(shè)設(shè)計師需要一個背景圖像，它要一直延伸到元素的右邊，并且要從頂部向下延伸10像素，如圖9-26所示。像以往一樣，先指定水平值：
p {background-image:url(bg23.gif);
background-repeat:no-repeat;
background-position:100% l0px;
border:1px dotted gray;}
圖9-26：結(jié)合使用百分?jǐn)?shù)值和長度值
警告：在網(wǎng)站建設(shè)CSS2.1之前的版本中，不能將關(guān)鍵字與其他值混合使用。因此，top 75%是非法的，如果使用了一個關(guān)鍵字，就只能一直使用關(guān)鍵字，CSS2.1為了讓創(chuàng)作人員更容易地設(shè)計布局，且考慮很多其他瀏覽器已經(jīng)支持這種功能，所以在這方面有所改變，允許關(guān)鍵字與其他值混用。
如果使用長度值或百分?jǐn)?shù)值，可以使用負(fù)值將原圖像拉出元素的背景區(qū)?？紤]一個例子，使用一個很大的“陰陽”符號作為背景。有時可能要將其居中，不過如果你只希望其中一部分在元素內(nèi)邊距區(qū)的左上角可見，該怎么做呢？沒問題，至少從理論上講是可以做到的。
首先，假設(shè)原圖像為300像素高300像素寬。再假設(shè)只有其右下方1/3的部分可見?？梢匀缦碌玫剿璧男Чㄈ鐖D9-27所示）：
p{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;
background-position:-200px-200px;
border:1px dotted gray;}
或者，假設(shè)網(wǎng)站建設(shè)人員只希望原圖像的右半部分可見，并在元素中居中，可以如下設(shè)置規(guī)則：
p{background-image:url(bigyinyang.gif);
background-repeat=no-repeat;
background-position:-150px 50%;
border:1px dotted gray;}
理論上負(fù)百分?jǐn)?shù)值也是允許的，不過對此存在兩個問題。第一個問題是用戶代理可能有限制，無法識別負(fù)的background-position值。另一個問題是，負(fù)百分?jǐn)?shù)值計算起來很有意思。比方說，原圖像和元素很可能大小不同而這會導(dǎo)致意想不到的后果。例如，考慮以下規(guī)則:
p{background-image:url(pix/bxgyinyang.gif)；
background-repeat:no-repeat;
background-position:-10%-10%;
border:1px dotted gray;width:500px;}
這個規(guī)則要求原圖像外由-10%-10%定義的點與各段落中同樣定義為-10%-10%的一個點對齊。圖像的寬度和高度都是300像素，所以我們知道，其對齊點可以描述位于圖像頂部之上30像素。左邊界再向左30像素的位置（也就是-30px X-30px）。段落元素的寬度都相等（500px），所以水平對齊點是其內(nèi)邊距區(qū)左邊界再向左50像素處。這說明，每個原圖像的左邊界將在段落左內(nèi)邊距邊界向左20像素的位置。這是因為，圖像的-30px對齊點與段落的-50px點對齊。二者之間相差20像素。
不過，各段落的高度不同，所以每個段落的垂直對齊點都不同。半隨機(jī)地選擇一個例子，如果一個段落為300像素高，原圖像的頂端將與元素內(nèi)邊距區(qū)的頂端對齊，因為二者的垂直對齊點都是-30px。如果一個段落高度為50像素，其對齊點將是-5px，相應(yīng)地，原圖像的頂端實際上將在內(nèi)邊距區(qū)頂端向下25像素處。
正百分?jǐn)?shù)值也可能出現(xiàn)同樣的問題（可以想象一下，如果將原圖像與比該圖像矮的一個元素的底端對齊，會發(fā)生什么情況），所以，以上介紹并不是說不應(yīng)該使用負(fù)值，而只是提醒網(wǎng)站建設(shè)人員往往存在一些要考慮的問題。
在這一節(jié)中，每個例子使用的重復(fù)值都是no-repeat。原因很簡單：如果只有一個背景圖像，可以更容易地査看定位對第一個背景圖像的放置有何影響。不過，完全沒必要阻止背景圖像重復(fù)：
p{background-image:url(bigyinyang.gif)；
background-position:-150px 50%;
border:1px dotted gray;}
所以，允許背景圖像重復(fù)時，從圖9-29可以看到，平鋪模式將從background-position指定的位置開始。
圖9-29 ：使用background-position屬性設(shè)置平鋪模式的起點
這再一次說明了原圖像的概念，對于理解下一節(jié)非常重要。