語(yǔ)法:
background-position : length || length
background-position : position || position
取值:
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱 長(zhǎng)度單位
position : top | center | bottom | left | center | right
說(shuō)明:
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。
該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響。
默認(rèn)值為: 0% 0% 。此時(shí)背景圖片將被定位于對(duì)象不包括補(bǔ)丁( padding )的內(nèi)容區(qū)域的左上角。
如果只指定了一個(gè)值,該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為 50% 。如果指定了兩個(gè)值,第二個(gè)值將用于縱坐標(biāo)。
如果設(shè)置值為 right center ,因?yàn)?right 作為橫坐標(biāo)值將會(huì)覆蓋 center 值,所以背景圖片將被居右定位。
對(duì)應(yīng)的腳本特性為 backgroundPosition。
注:本文中使用的圖片大小為 300px*120px,為了能很清晰的表達(dá)圖形的哪部分被隱藏了,按照?qǐng)D片的大小平均分成了9等份。同時(shí)背景圖片容器區(qū)域繪制出綠色邊框清晰顯示容器的范圍。
1、background-position:0 0;
背景圖片的左上角將與容器元素的左上角對(duì)齊。該設(shè)置與background-position:left top;或者background-position:0% 0%;設(shè)置的效果是一致的。例如:

圖 1
2、該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響。
例如,我們給容器元素增加padding值,背景圖片的左上角還是與容器元素的左上角對(duì)齊。在此處只是影響到了容器元素的高度和寬度。

圖 2
新聞熱點(diǎn)
疑難解答
圖片精選