background position用法詳解

2022-09-15 23:15:16 字數 1650 閱讀 8502

background-position的值有三種表示方法,分別有不同的含義:

1)百分比   (容器的內容寬度-背景的寬度)*對應的百分比 即為要移動的距離    如果您僅規定了乙個值,另乙個值將是 50%。

如果您僅規定了乙個值,另乙個值將是50%。您可以混合使用 % 和 position 值。

1、background-position:0 0;等於background-position:left top;(左上角)

2、background-position:100% 100%;等於background-position:right bottom;(右下角)

3、background-position:-70px -40px;(以左上角為0 0點座標,向左偏移70px,向上偏移40px)

4、background-position:70px 40px;(以左上角為0 0點座標,向右偏移70px,向下偏移40px)

5、background-position:50% 50%;等於background-position:center center;(居中顯示)

6、說明: 

設定或檢索物件的背景影象位置。必須先指定 background-image 屬性。

該屬性定位不受物件的補丁屬性( padding )設定影響。

預設值為: 0% 0% 。此時背景將被定位於物件不包括補丁( padding )的內容區域的左上角。

如果設定值為 right center ,因為 right 作為橫座標值將會覆蓋 center 值,所以背景將被居右定位。

對應的指令碼特性為 backgroundposition。

1、background-position:0 0;等於background-position:left top;(左上角)

2、background-position:100% 100%;等於background-position:right bottom;(右下角)

3、background-position:-70px -40px;(以左上角為0 0點座標,向左偏移70px,向上偏移40px)

4、background-position:70px 40px;(以左上角為0 0點座標,向右偏移70px,向下偏移40px)

5、background-position:50% 50%;等於background-position:center center;(居中顯示)

6、說明: 

設定或檢索物件的背景影象位置。必須先指定 background-image 屬性。

該屬性定位不受物件的補丁屬性( padding )設定影響。

預設值為: 0% 0% 。此時背景將被定位於物件不包括補丁( padding )的內容區域的左上角。

如果設定值為 right center ,因為 right 作為橫座標值將會覆蓋 center 值,所以背景將被居右定位。

對應的指令碼特性為 backgroundposition。

background position用法詳解

語法 background position length length background position position position 取值 length 百分數 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位 position top center bottom left c...

background position屬性用法

background url images list01.png no repeat 0 center background url images bg.png no repeat 4px 3px background url images list01.png no repeat 0 center...

background position 詳細用法

語法 background position length length background position position position 取值 length 百分數 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位 position top center bottom left c...