background-position

background-position 屬性用來控制背景圖片在元素中的位置。

技巧是，實際上指定的是圖片左上角相對於元素左上角的位置。

下面的例子中，設置了一個背景圖片並且用 background-position 屬性來控制它的位置，同時也設置了 background-repeat 為 no-repeat。

計量單位是像素。第一個數字表示 x 軸(水平)位置，第二個是 y 軸(垂直) 位置。

/* 例 1: 默認值 */

background-position: 0 0; /* 元素的左上角 */

/* 例 2: 把圖片向右移動 */

background-position: 75px 0;

/* 例 3: 把圖片向左移動 */

background-position: -75px 0;

/* 例 4: 把圖片向下移動 */

background-position: 0 100px;

background-position 屬性可以用其它數值，關鍵詞和百分比來指定，這比較有用，尤其是在元素尺寸不是用像素設置時。

關鍵詞是不用解釋的。

x 軸上：

* left

* center

* right

y 軸上:

* top

* center

* bottom

順序方面和使用像素值時的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這樣：

background-position: top right;

使用百分數時也類似。需要主要的是，使用百分數時，瀏覽器是以元素的百分比數值來設置圖片的位置的。看例子就好理解了。

假設設定如下：

background-position: 100% 50%;

使用百分數定位時，其實是將背景圖片的百分比指定的位置和元素的百分比位置對齊。

也就是說，百分數定位是改變了背景圖和元素的對齊基 點。不再像使用像素和關鍵詞定位時，使用背景圖和元素的左上角為對齊基點。

例如上例的 background-position: 100% 50%; 就是將背景圖片的 100%(right) 50%(center) 這個點，和元素的 100%(right) 50%(center) 這個點對齊。