如何定位背景圖像：

body
{ 
background-image:url('image.gif');
background-repeat:no-repeat;
background-attachment:fixed;background-position:center;}

所有瀏覽器都支持 background-position 屬性。

注釋：任何版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

定義和用法

background-position 屬性設(shè)置背景圖像的起始位置。

可能的值

我們經(jīng)常使用的background-position的值就是<position>值，最近剛介紹的object-position的值也是<position>值。

<position>值支持1~4個值，可以是具體數(shù)值，也可以是百分比，也可以是left, top, right, center, bottom關(guān)鍵字。可參考下圖經(jīng)典示意：

如果偏移沒有相應(yīng)的關(guān)鍵字，則會被認(rèn)為是center, 因此，background-position:top center可以直接寫作background-position:top。

除了背景背景平鋪外，CSS還提供了另一個強大的功能，即背景定位技術(shù)，能夠精確控制背景在對象中的位置。

默認(rèn)情況下，背景圖像都是從元素 padding 區(qū)域的左上角開始出現(xiàn)的，但設(shè)計師往往希望背景能夠出現(xiàn)在任何位置。通過 background-position屬性，可以很輕松的控制背景圖像在對象的背景區(qū)域中的起始顯示位置。其語法格式為：

background-position: xpos ypos | x% y% | x y

CSS1中，background-position屬性需要 2 個參數(shù)值，第一個值用于橫坐標(biāo)，第二個值用于縱坐標(biāo)，默認(rèn)值為 0% 0%，即背景圖像的左上角與對象背景區(qū)域的左上角對齊。如果只提供一個值，則用于 x 軸方向，y 軸方向使用默認(rèn)值 center，即垂直居中。

上述語法格式表明，背景圖像有 3 種定位方式：

1）xpos ypos：表示使用預(yù)定義關(guān)鍵字定位，水平方向可選關(guān)鍵字有 left | center | right，垂直方向可選關(guān)鍵字有 top | center | bottom。

關(guān)鍵字定位，應(yīng)用的是對齊規(guī)則，而不是坐標(biāo)規(guī)則。xpos 為 left 表示圖像的左邊與對象的左邊對齊，為 right 表示圖像的右邊和對象的右邊對齊；ypos 為 top 表示圖像的頂部和對象的頂部對齊，為 bottom 表示圖像的底部和對象的底部對齊；xpos、ypos等于 center表示圖像在水平和垂直方向的中心，和對象在水平和垂直方向的中心對齊，即。

依然使用前面的背景圖案 bg.gif，其尺寸為 100px * 100px，對象的尺寸為 200px * 200px，背景圖像的位置使用預(yù)定義關(guān)鍵字定位。如：

1. 
   

2. div {
     width: 200px;
     height: 200px;
     border: 1px dashed #ccc;
     background-repeat: no-repeat;
     background-position: center center;
     background-image: url(img/bg.gif);
   }

上述定位，就表示背景圖像的中心，與背景區(qū)域的中心對齊，即背景圖像位于對象的中央位置。運行結(jié)果如圖 4?28 所示：

圖4-28 背景圖像關(guān)鍵字定位

2）x% y%：表示使用百分比定位，是將圖像本身（x%, y%）的那個點，與背景區(qū)域的（x%, y%）的那個點重合。最終得到背景圖像起始位置坐標(biāo)的計算公式為：

x = (對象的寬度 - 圖像的寬度) * x%;

y = (對象的高度 - 圖像的高度) * y%;

還是上面的例子，改為百分比定位，要使背景圖像居中，只需把背景圖像的位置設(shè)置為50% 50% 即可。使用上面的公式，得到背景圖像起始位置的坐標(biāo)為：

x：(200px - 100px) * 50%  = 100px * 50% = 50px

y：(200px - 100px) * 50%  = 100px * 50% = 50px

得到的結(jié)果與上例相同，限于篇幅，就不再截圖了。當(dāng)然，百分比的值也可以是負(fù)值，計算公式依然不變。還是上面的例子，把百分比改為 -50% -50%。此時，得到背景圖像起始位置的坐標(biāo)為：

x：(200px - 100px) * (-50%) = 100px * (-50%) = -50px

y：(200px - 100px) * (-50%) = 100px * (-50%) = -50px

運行結(jié)果如圖 4?29 所示：

圖4-29 背景圖像百分比定位

從上圖可以看出，此時的背景圖像只顯示了原本圖像的 1/4，這是因為背景圖像的起始位置向左、向上移動后，只有1/4 的圖案落到了背景區(qū)域。由于背景被設(shè)置為不重復(fù)，所以，就只顯示了原本圖像的 1/4。

3）x y：表示使用長度值定位，是將背景圖像的左上角，放置在對象的背景區(qū)域中（x, y）所指定的位置，即 x, y 定義的是背景圖像的左上角，相對于背景區(qū)域左上角的偏移量。

偏移量長度可以是正值，也可以是負(fù)值。x 為正值表示向右偏移，負(fù)值表示向左偏移；y 為正值表示向下偏移，負(fù)值表示向上偏移。背景圖像發(fā)生移動后，就有可能超出對象的背景區(qū)域。此時，超出的部分將不會顯示，只會顯示落入背景區(qū)域的部分。

如果把上面的例子改為長度值定位，要使背景圖像居中，只需把背景圖像的位置設(shè)置為50px 50px 即可。它就表示背景圖像的左上角頂點，相對于對象背景區(qū)域的左上角頂點在 x軸右移 50px，在 y 軸下移 50px。得到的結(jié)果依然是背景圖像位于對象的中央。

在CSS3中，background-position屬性支持 4 個參數(shù)值，前兩個值用于橫坐標(biāo)，后兩個值用于縱坐標(biāo)。這意味著我們可以相對于上左下右任意一個角落定位，而不是之前只能相對于左上角定位?？梢杂瞄L度值、或百分比來指定背景圖像的起始位置。

如果只提供一個值，則第二個值為center。如果提供兩個值，第一個長度或百分比表示水平偏移，第二個長度或百分比表示垂直偏移。長度或百分比，表示背景圖像的左上角相對于背景位置區(qū)域左上角的偏移。如，下面幾個聲明給出了背景的起點相對于背景區(qū)域左上角的偏移：

1. 
   

2. background-position: left 10px top 15px;   /* 10px, 15px */
   background-position: left     top     ;    /*  0px,  0px */
   background-position:    10px    15px;      /* 10px, 15px */
   background-position: left         15px;    /*  0px, 15px */
   background-position:    10px top     ;     /* 10px,  0px */
   background-position: left      top 15px;   /*  0px, 15px */
   background-position: left 10px top     ;   /* 10px,  0px */

• css
• position
• 背景
• background-position