長(zhǎng)度值

最后，我們來(lái)看定位的長(zhǎng)度值。在為原圖像的位置提供長(zhǎng)度值時(shí)，這些長(zhǎng)度值將解釋為從元素內(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：使用長(zhǎng)度度設(shè)置背景圖像的偏移

這與網(wǎng)頁(yè)設(shè)計(jì)中百分?jǐn)?shù)值大不相同，因?yàn)槠浦皇菑囊粋€(gè)左上角到另一個(gè)左上量角的偏移。換句話說(shuō)，原圖像的左上角與background-position聲明中指定的點(diǎn)對(duì)齊。不過(guò)，網(wǎng)頁(yè)設(shè)計(jì)師可以結(jié)合使用長(zhǎng)度和百分?jǐn)?shù)值，得到“二者兼俱”的效果。假設(shè)設(shè)計(jì)師需要一個(gè)背景圖像，它要一直延伸到元素的右邊，并且要從頂部向下延伸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ù)值和長(zhǎng)度值

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

如果使用長(zhǎng)度值或百分?jǐn)?shù)值，可以使用負(fù)值將原圖像拉出元素的背景區(qū)?？紤]一個(gè)例子，使用一個(gè)很大的“陰陽(yáng)”符號(hào)作為背景。有時(shí)可能要將其居中，不過(guò)如果你只希望其中一部分在元素內(nèi)邊距區(qū)的左上角可見(jiàn)，該怎么做呢？沒(méi)問(wèn)題，至少?gòu)睦碚撋现v是可以做到的。

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

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

background-repeat:no-repeat;

background-position:-200px-200px;

border:1px dotted gray;}

或者，假設(shè)網(wǎng)站建設(shè)人員只希望原圖像的右半部分可見(jiàn)，并在元素中居中，可以如下設(shè)置規(guī)則：

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

background-repeat=no-repeat;

background-position:-150px 50%;

border:1px dotted gray;}

理論上負(fù)百分?jǐn)?shù)值也是允許的，不過(guò)對(duì)此存在兩個(gè)問(wèn)題。第一個(gè)問(wèn)題是用戶代理可能有限制，無(wú)法識(shí)別負(fù)的background-position值。另一個(gè)問(wèn)題是，負(fù)百分?jǐn)?shù)值計(jì)算起來(lái)很有意思。比方說(shuō)，原圖像和元素很可能大小不同而這會(huì)導(dǎo)致意想不到的后果。例如，考慮以下規(guī)則:

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

background-repeat:no-repeat;

background-position:-10%-10%;

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

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

不過(guò)，各段落的高度不同，所以每個(gè)段落的垂直對(duì)齊點(diǎn)都不同。半隨機(jī)地選擇一個(gè)例子，如果一個(gè)段落為300像素高，原圖像的頂端將與元素內(nèi)邊距區(qū)的頂端對(duì)齊，因?yàn)槎叩拇怪睂?duì)齊點(diǎn)都是-30px。如果一個(gè)段落高度為50像素，其對(duì)齊點(diǎn)將是-5px，相應(yīng)地，原圖像的頂端實(shí)際上將在內(nèi)邊距區(qū)頂端向下25像素處。

正百分?jǐn)?shù)值也可能出現(xiàn)同樣的問(wèn)題（可以想象一下，如果將原圖像與比該圖像矮的一個(gè)元素的底端對(duì)齊，會(huì)發(fā)生什么情況），所以，以上介紹并不是說(shuō)不應(yīng)該使用負(fù)值，而只是提醒網(wǎng)站建設(shè)人員往往存在一些要考慮的問(wèn)題。

在這一節(jié)中，每個(gè)例子使用的重復(fù)值都是no-repeat。原因很簡(jiǎn)單：如果只有一個(gè)背景圖像，可以更容易地査看定位對(duì)第一個(gè)背景圖像的放置有何影響。不過(guò)，完全沒(méi)必要阻止背景圖像重復(fù)：

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

background-position:-150px 50%;

border:1px dotted gray;}

所以，允許背景圖像重復(fù)時(shí)，從圖9-29可以看到，平鋪模式將從background-position指定的位置開(kāi)始。

圖9-29 ：使用background-position屬性設(shè)置平鋪模式的起點(diǎn)

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