今天看到了有關學習的價值的文章background于background-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:00;
背景圖片的左上角將與容器元素的左上角對齊。該設置與background-position:lefttop;或者background-position:0%0%;設置的效果是一致的。比如：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll 0 0;
border:5px solid green;
}

效果例如以下圖1：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??圖 1

2、該屬性定位不受對象的補丁屬性( padding )設置影響。

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

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll 0 0;
border:5px solid green;
padding:50px;
}

效果如圖2：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖 2

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

圖片以容器左上角為參考向左偏移70px。向上偏移 40px。演示樣例：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll -70px -40px;
border:5px solid green;
}

效果如圖3：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖 3

4、background-position:70px40px;

圖片以容器左上角為參考向右偏移70px，向下偏移 40px，演示樣例：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll 70px 40px;
border:5px solid green;
}

效果如圖4：

??????????????????????????????????圖 4

5、background-position:50%50%;

圖片水平和垂直居中。

與 background-position:center center;效果等同。

等同于x：{容器(container)的寬度—背景圖片的寬度}*x百分比。超出的部分隱藏。
等同于y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

比如： .container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll 50% 50%;
border:5px solid green;
}

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

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

效果如圖5：

????????????????????????????????????圖 5

由于超出部分別往兩端延伸。所以我們能夠先制作一張寬度足夠寬圖片設置水平值為50%。這樣能夠用來適應不同的瀏覽器，使得圖片水平充滿瀏覽器窗體而且居中。替代margin:50auto的功能。

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

等同于x：-{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。

等同于y：-{容器(container)的高度—背景圖片的高度}*y百分比。超出的部分隱藏。

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll -50% -50%;
border:5px solid green;
}

效果如圖6：

????????????????????????????????????圖 6

7、background-position:100%100%;

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

演示樣例：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg)no-repeat scroll 100% 100%;
border:5px solid green;
}

效果如圖7：

???????????????????????????????????圖 7

?【0積分下載我的小Demo】

轉載于:https://www.cnblogs.com/gcczhongduan/p/4841356.html

總結

以上是生活随笔為你收集整理的background意识（两）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。