background-position解析

參考文章爲：http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html

background-position屬性有三種方式能夠設置：

一、百分比 x% y%

二、位置

水平：left|center|right;

left至關於x爲0%   center 50%    right 100%

垂直：top|center|bottom;

top至關於y爲0%   center 50%    bottom 100%

三、數字

10px 20px;   -30px -40px;

 

說明： 
設置或檢索對象的背景圖像位置。必須先指定 background-image 屬性。
該屬性定位不受對象的補丁屬性( padding )設置影響。
默認值爲： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容區域的左上角。
若是隻指定了一個值，該值將用於橫座標。縱座標將默認爲 50% 。若是指定了兩個值，第二個值將用於縱座標。
若是設置值爲 right center ，由於 right 做爲橫座標值將會覆蓋 center 值，因此背景圖片將被居右定位。
對應的腳本特性爲 backgroundPosition。

 

當設置的值爲數字的時候：

　　好比爲20px 30px，那麼就是背景圖片從0,0點向右移動20px，而後再向下移動30px。

　　好比爲-20px  -30px，那麼就是背景圖片從0,0,點向左移動20px，而後再向上移動30px。

 

若是設置的爲百分比的時候：

　　等同於x：（容器(container)的寬度 - 背景圖片的寬度）*x百分比，超出的部分隱藏
　　等同於y：（容器(container)的高度 - 背景圖片的高度）*y百分比，超出的部分隱藏

　　（1）好比容器的寬度爲1000px，高度爲540px；背景圖片的寬度爲269px，高度爲276px。background-position爲20%  30%。

　　那麼x爲(1000-269)*20%=146px（小數部分是四捨五入）

　　y爲(540-276)*30%=79px

　　最後就是背景圖片從0,0點向右移動146px，而後再向下移動79px

　　（2）好比容器的寬度爲1000px，高度爲540px；背景圖片的寬度爲269px，高度爲276px。background-position爲-20%  -30%。

　　那麼x爲(1000-269)*(-20%)=-146px（小數部分是四捨五入）

　　y爲(540-276)*(-30%)=-79px

　　最後就是背景圖片從0,0點向左移動146px，而後再向上移動79px

 

若是設置的爲位置（left top等）

　　先把位置轉換成百分比，而後再按照百分比的方式計算