/* 例 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%; This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.糖伴西紅柿：這一段沒想到合適的翻譯，保留原文，意譯。前端觀察 版權所有，轉載請保留鏈接。update: 感謝 天涯 的指教，這段搞明白了。使用百分數定位時，其實是將背景圖片的百分比指定的位置和元素的百分比位置對齊。也就是說，百分數定位是改變了背景圖和元素的對齊基點。不再像使用像素和關鍵詞定位時，使用背景圖和元素的左上角為對齊基點。例如上例的 background-position: 100% 50%; 就是將背景圖片的 100%(right) 50%(center) 這個點，和元素的 100%(right) 50%(center) 這個點對齊。這再一次說明了，我們一直認為已經掌握的簡單的東西，其實還有我們有限的認知之外的知識。最終的效果是笑臉圖片被定位在元素的最右邊，離元素頂部是元素的一半，效果和 background-position: right center; 一樣。html教程
