HTML CSS——background的認識（二）

今天看到了一篇有學習價值的關於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】