background position 個人理解

2022-02-24 09:36:16 字數 1222 閱讀 6716

background-position

這裡先說畫素  百分比比較複雜

background-position:xxpx xxpx  這裡第乙個值指的是x軸座標  第二個值是y軸座標

這裡使用的座標系和數學中的座標系不同   它大概是這樣的

----------------->  x軸||

||||

||vy軸

先說說比div小得情況

此時移動的是

再說說幾個特殊的值  x軸 left right center y軸 top bottom center

left和top相當於0px right和bottom相當於使影象到達邊界的最大值 center就是使影象來到中間位置的值

所以可以用center center來使居中

當比div小的時候 這個x軸 y軸的數值表示的是左上角距離div左上角的距離

<

div

class

='one'

>

div>

當比div大的時候 可以通過x軸 y軸設定負值來實現對的裁剪

實際上就是控制位置 顯示只需要顯示的部分

<

div

class

='two'

>

div>

body

>

html

>

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...

background position 詳細用法

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