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:0 0;

背景圖檔的左上角将與容器元素的左上角對齊。該設定與background-position:left top;或者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值，背景圖檔的左上角還是與容器元素的左上角對齊。在此處隻是影響到了容器元素的高度和寬度。

        padding:50px;

效果如圖2：

                                                   圖 2

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

圖檔以容器左上角為參考向左偏移70px，向上偏移 40px，示例：

        background:transparent url(bg.jpg) no-repeat scroll -70px -40px;

效果如圖3：

                                  圖 3

4、background-position:70px 40px;

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

        background:transparent url(bg.jpg) no-repeat scroll 70px 40px;

效果如圖4：

                                   圖 4

5、background-position:50% 50%;

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

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

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

 例如： .container{

        background:transparent url(bg.jpg) no-repeat scroll 50% 50%;

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

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

效果如圖5：

                                     圖 5

由于超出部分别往兩端延伸，是以我們可以先制作一張寬度足夠寬圖檔設定水準值為50%，這樣可以用來适應不同的浏覽器，使得圖檔水準充滿浏覽器視窗并且居中。替代margin:50 auto的功能。

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

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

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

        background:transparent url(bg.jpg) no-repeat scroll -50% -50%;

效果如圖6：

                                     圖 6

7、background-position:100% 100%;

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

示例：

        background:transparent url(bg.jpg) no-repeat scroll 100% 100%;

效果如圖7：

本文轉自    風雨蕭條 部落格，原文連結：  http://blog.51cto.com/1095221645/1831708      如需轉載請自行聯系原作者