background position屬性用法

2021-07-15 04:31:53 字數 2532 閱讀 7829

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;

的意思是 影象位址 不重複 水平位置0 垂直位置居中

0 center 的意思就是 水平位置0 垂直位置居中

-4px -3px 的意思就是 水平位置-4px 垂直位置-3px

x% y% ( 第乙個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了乙個值，另乙個值將是 50%。)

mpx npx (第乙個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是畫素 (0px 0px) 或任何其他的 css 單位。如果您僅規定了乙個值，另乙個值將是50%。)

您可以混合使用 % 和 position 值。

語法：

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：

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

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

.container
效果如圖2：

圖 2
3、background-position:-70px -40px;

.container
效果如圖3：

圖 3
4、background-position:70px 40px;

.container
效果如圖4：

圖 4
5、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：

圖 6
7、background-position:100% 100%;

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

示例：

.container
效果如圖7：

圖 7
頂

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

background position 個人理解

background position 這裡先說畫素 百分比比較複雜 background position xxpx xxpx 這裡第乙個值指的是x軸座標 第二個值是y軸座標 這裡使用的座標系和數學中的座標系不同 它大概是這樣的 x軸 vy軸 先說說比div小得情況 此時移動的是 再說說幾個特殊的...