background position用法詳解

2021-08-04 09:07:43 字數 1885 閱讀 7608

語法:

background-position : length || length 

background-position : position || position 

取值:

length  : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位  

position  : top | center | bottom | left | center | right 

說明:

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

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

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

如果只指定了乙個值,該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值,第二個值將用於縱座標。

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

對應的指令碼特性為 backgroundposition。

注:本文中使用的大小為 300px*120px,為了能很清晰的表達圖形的哪部分被隱藏了,按照的大小平均分成了9等份。同時背景容器區域繪製出綠色邊框清晰顯示容器的範圍。

1、background-position:0 0;

背景的左上角將與容器元素的左上角對齊。該設定與background-position:left top;或者background-position:0% 0%;設定的效果是一致的。例如:

.container

效果如下圖1:

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

例如,我們給容器元素增加padding值,背景的左上角還是與容器元素的左上角對齊。在此處只是影響到了容器元素的高度和寬度。

.container

效果如圖2:

圖 23、background-position:-70px -40px;

以容器左上角為參考向左偏移70px,向上偏移 40px,示例:

.container

效果如圖3:

圖 34、background-position:70px 40px;

以容器左上角為參考向右偏移70px,向下偏移 40px,示例:

.container

效果如圖4:

圖 45、background-position:50% 50%;

水平和垂直居中。與 background-position:center center;效果等同。

等同於x:*x百分比,超出的部分隱藏。

等同於y:*y百分比,超出的部分隱藏。

例如: .container

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如圖5:

圖 5由於超出部分別往兩端延伸,所以我們可以先製作一張寬度足夠寬設定水平值為50%,這樣可以用來適應不同的瀏覽器,使得水平充滿瀏覽器視窗並且居中。替代margin:50 auto的功能。

6、background-position:-50% -50%;

等同於x:-*x百分比,超出的部分隱藏。

等同於y:-*y百分比,超出的部分隱藏。

.container

效果如圖6:

圖 67、background-position:100% 100%;

處於容器元素的右下角,與 background-position:right bottom;效果等同。

示例:.container

效果如圖7:

圖 7

background position用法詳解

background position的值有三種表示方法,分別有不同的含義 1 百分比 容器的內容寬度 背景的寬度 對應的百分比 即為要移動的距離 如果您僅規定了乙個值,另乙個值將是 50 如果您僅規定了乙個值,另乙個值將是50 您可以混合使用 和 position 值。1 background p...

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