長度值

最后，我們來看定位的長度值。在為原圖像的位置提供長度值時，這些長度值將解釋為從元素內邊距區左上角的偏移。偏移點是原圖像的左上角。因此，如果網站建設人員設置值為20px 30px，原圖像的左上角將在元素內邊距區左上角向右20像素，向下30像素的位置上，如圖9-25所示：

p{background-image:url(yinyang.gif);

background-repeat:no-repeat;

background-position:20px 30px;

border:1px dotted gray;}

圖9-25：使用長度度設置背景圖像的偏移

這與網頁設計中百分數值大不相同，因為偏移只是從一個左上角到另一個左上量角的偏移。換句話說，原圖像的左上角與background-position聲明中指定的點對齊。不過，網頁設計師可以結合使用長度和百分數值，得到“二者兼俱”的效果。假設設計師需要一個背景圖像，它要一直延伸到元素的右邊，并且要從頂部向下延伸10像素，如圖9-26所示。像以往一樣，先指定水平值：

p {background-image:url(bg23.gif);

background-repeat:no-repeat;

background-position:100% l0px;

border:1px dotted gray;}

圖9-26：結合使用百分數值和長度值

警告：在網站建設CSS2.1之前的版本中，不能將關鍵字與其他值混合使用。因此，top 75%是非法的，如果使用了一個關鍵字，就只能一直使用關鍵字，CSS2.1為了讓創作人員更容易地設計布局，且考慮很多其他瀏覽器已經支持這種功能，所以在這方面有所改變，允許關鍵字與其他值混用。

如果使用長度值或百分數值，可以使用負值將原圖像拉出元素的背景區?？紤]一個例子，使用一個很大的“陰陽”符號作為背景。有時可能要將其居中，不過如果你只希望其中一部分在元素內邊距區的左上角可見，該怎么做呢？沒問題，至少從理論上講是可以做到的。

首先，假設原圖像為300像素高300像素寬。再假設只有其右下方1/3的部分可見?？梢匀缦碌玫剿璧男Чㄈ鐖D9-27所示）：

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

background-repeat:no-repeat;

background-position:-200px-200px;

border:1px dotted gray;}

或者，假設網站建設人員只希望原圖像的右半部分可見，并在元素中居中，可以如下設置規則：

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

background-repeat=no-repeat;

background-position:-150px 50%;

border:1px dotted gray;}

理論上負百分數值也是允許的，不過對此存在兩個問題。第一個問題是用戶代理可能有限制，無法識別負的background-position值。另一個問題是，負百分數值計算起來很有意思。比方說，原圖像和元素很可能大小不同而這會導致意想不到的后果。例如，考慮以下規則:

p{background-image:url(pix/bxgyinyang.gif)；

background-repeat:no-repeat;

background-position:-10%-10%;

border:1px dotted gray;width:500px;}

這個規則要求原圖像外由-10%-10%定義的點與各段落中同樣定義為-10%-10%的一個點對齊。圖像的寬度和高度都是300像素，所以我們知道，其對齊點可以描述位于圖像頂部之上30像素。左邊界再向左30像素的位置（也就是-30px X-30px）。段落元素的寬度都相等（500px），所以水平對齊點是其內邊距區左邊界再向左50像素處。這說明，每個原圖像的左邊界將在段落左內邊距邊界向左20像素的位置。這是因為，圖像的-30px對齊點與段落的-50px點對齊。二者之間相差20像素。

不過，各段落的高度不同，所以每個段落的垂直對齊點都不同。半隨機地選擇一個例子，如果一個段落為300像素高，原圖像的頂端將與元素內邊距區的頂端對齊，因為二者的垂直對齊點都是-30px。如果一個段落高度為50像素，其對齊點將是-5px，相應地，原圖像的頂端實際上將在內邊距區頂端向下25像素處。

正百分數值也可能出現同樣的問題（可以想象一下，如果將原圖像與比該圖像矮的一個元素的底端對齊，會發生什么情況），所以，以上介紹并不是說不應該使用負值，而只是提醒網站建設人員往往存在一些要考慮的問題。

在這一節中，每個例子使用的重復值都是no-repeat。原因很簡單：如果只有一個背景圖像，可以更容易地査看定位對第一個背景圖像的放置有何影響。不過，完全沒必要阻止背景圖像重復：

p{background-image:url(bigyinyang.gif)；

background-position:-150px 50%;

border:1px dotted gray;}

所以，允許背景圖像重復時，從圖9-29可以看到，平鋪模式將從background-position指定的位置開始。

圖9-29 ：使用background-position屬性設置平鋪模式的起點

這再一次說明了原圖像的概念，對于理解下一節非常重要。