/* 例 4: 把圖片向下移動(dòng) */ background-position: 0 100px;background-position 屬性可以用其它數(shù)值，關(guān)鍵詞和百分比來(lái)指定，這比較有用，尤其是在元素尺寸不是用像素設(shè)置時(shí)。關(guān)鍵詞是不用解釋的。x 軸上：* left * center * right y 軸上:* top * center * bottom 順序方面和使用像素值時(shí)的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這樣：background-position: top right;使用百分?jǐn)?shù)時(shí)也類似。需要主要的是，使用百分?jǐn)?shù)時(shí)，瀏覽器是以元素的百分比數(shù)值來(lái)設(shè)置圖片的位置的?？蠢泳秃美斫饬?。假設(shè)設(shè)定如下：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.糖伴西紅柿：這一段沒(méi)想到合適的翻譯，保留原文，意譯。前端觀察 版權(quán)所有，轉(zhuǎn)載請(qǐng)保留鏈接。update: 感謝 天涯 的指教，這段搞明白了。使用百分?jǐn)?shù)定位時(shí)，其實(shí)是將背景圖片的百分比指定的位置和元素的百分比位置對(duì)齊。也就是說(shuō)，百分?jǐn)?shù)定位是改變了背景圖和元素的對(duì)齊基點(diǎn)。不再像使用像素和關(guān)鍵詞定位時(shí)，使用背景圖和元素的左上角為對(duì)齊基點(diǎn)。例如上例的 background-position: 100% 50%; 就是將背景圖片的 100%(right) 50%(center) 這個(gè)點(diǎn)，和元素的 100%(right) 50%(center) 這個(gè)點(diǎn)對(duì)齊。這再一次說(shuō)明了，我們一直認(rèn)為已經(jīng)掌握的簡(jiǎn)單的東西，其實(shí)還有我們有限的認(rèn)知之外的知識(shí)。最終的效果是笑臉圖片被定位在元素的最右邊，離元素頂部是元素的一半，效果和 background-position: right center; 一樣。html教程
