長度值

最后，我們來看定位的長度值。在為原圖像的位置提供長度值時，這些長度值將解釋為從元素內(nèi)邊距區(qū)左上角的偏移。偏移點(diǎn)是原圖像的左上角。因此，如果網(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ì)中百分?jǐn)?shù)值大不相同，因?yàn)槠浦皇菑囊粋€左上角到另一個左上量角的偏移。換句話說，原圖像的左上角與background-position聲明中指定的點(diǎn)對齊。不過，網(wǎng)頁設(shè)計(jì)師可以結(jié)合使用長度和百分?jǐn)?shù)值，得到“二者兼俱”的效果。假設(shè)設(shè)計(jì)師需要一個背景圖像，它要一直延伸到元素的右邊，并且要從頂部向下延伸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ì)布局，且考慮很多其他瀏覽器已經(jīng)支持這種功能，所以在這方面有所改變，允許關(guān)鍵字與其他值混用。

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

首先，假設(shè)原圖像為300像素高300像素寬。再假設(shè)只有其右下方1/3的部分可見。可以如下得到所需的效果（如圖9-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ù)值計(jì)算起來很有意思。比方說，原圖像和元素很可能大小不同而這會導(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%定義的點(diǎn)與各段落中同樣定義為-10%-10%的一個點(diǎn)對齊。圖像的寬度和高度都是300像素，所以我們知道，其對齊點(diǎn)可以描述位于圖像頂部之上30像素。左邊界再向左30像素的位置（也就是-30px X-30px）。段落元素的寬度都相等（500px），所以水平對齊點(diǎn)是其內(nèi)邊距區(qū)左邊界再向左50像素處。這說明，每個原圖像的左邊界將在段落左內(nèi)邊距邊界向左20像素的位置。這是因?yàn)椋瑘D像的-30px對齊點(diǎn)與段落的-50px點(diǎn)對齊。二者之間相差20像素。

不過，各段落的高度不同，所以每個段落的垂直對齊點(diǎn)都不同。半隨機(jī)地選擇一個例子，如果一個段落為300像素高，原圖像的頂端將與元素內(nèi)邊距區(qū)的頂端對齊，因?yàn)槎叩拇怪睂R點(diǎn)都是-30px。如果一個段落高度為50像素，其對齊點(diǎn)將是-5px，相應(yīng)地，原圖像的頂端實(shí)際上將在內(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è)置平鋪模式的起點(diǎn)

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