CSS屬性之background-position的用法

做爲CSS中使用圖片時會用到的屬性，background-position的使用頻率是很高的，它的做用就是設定某元素背景圖像的初始位置。而且它有三種設定參數的方式，雖然這三種方式能夠混合使用，不過我通常針對不一樣場景使用對應的參數設定方式。雖然官方文檔上敘述了這三種方式，但是依然有些地方讓我費解，特別是百分比的設定，通過實踐，發現一個公式來計算須要設定的百分值，我會在後面詳細闡述。

關於background-position的工做原理，個人理解是將圖片上須要顯示出來的區域相對於元素的左上角，也就是座標點（0,0）進行水平和垂直方向偏移。

總的來講，background-position的參數設定方式是從簡單到複雜，讓我從簡單的開始介紹：

1. 使用語義明確的單詞
   水平方向：左（left），中(center)，右(right)
   垂直方向：上（top），中(center)，下(bottom)
   很明顯，這種方式言簡意賅，使用簡潔而語義明確。
   background-position: top center; // 從圖片頂部開始，居中顯示
   background-position: top left; // 從圖片頂部，靠左開始顯示（左上角）
   background-position: top right; // 從圖片頂部，靠右開始顯示（右上角）
   background-position: bottom left; // 從圖片底部，靠左開始顯示（左下角）
   background-position: bottom right; // 從圖片底部，靠右開始顯示（右下角）
   更多例子
   
   採用這種方式來顯示圖片，通常狀況是爲了顯示整個圖片文件上的內容，好比頁面的背景圖，換句話說，圖片文件上就只有一個圖像須要顯示，而後使用這種方式來進行大概的定位操做，好比須要居中的將背景圖片顯示出來。
   
   
2. 數值用法
   這是一種對圖片上須要顯示的區域進行精肯定位方法，用來實現CSS Sprites。
   CSS Sprites就是將須要顯示的多個圖像排列到一個圖片文件上，這樣作的好處是能夠減小圖片數量，也就減小了HTTP請求次數，從而優化了網站的性能。通常來講，網站經常使用的圖像資源，好比button，logo，icon均可以放到一張圖片上。
   舉個例子，咱們如今有一張圖包含了不少icon，如今想要顯示紅色P那個icon，如圖已經測量出紅色P距離上邊界和左邊界的距離。
   
   使用以下的設定，
   

   .icon {
   	width: 125px; // 首先建立一個長寬爲125px的容器元素
   	height: 125px;
   	background-image: url('../assets/images/icon_sprites.png'); // 設置這個元素的背景圖片
   	background-position: -128px -384px; // 設置偏移量
   }

   就能夠顯示出紅色P了。
   
   
   很神奇吧，咱們能夠這樣理解，剛建立的容器元素是一個從這張圖片（0,0）座標開始的一個相框，這個相框的大小是固定的125px，因此若是不設置background-position，也就是不設置任何偏移，看到的就是左上角那個icon。
   
   因此圖片須要向上384px,向左128px才能移動到紅色P的位置。
   
   但是爲何設的是負值呢？
   這是由於HTML裏的X軸向右是正值，Y軸向下是正值！
   
   而剛纔咱們的圖片須要向左向上移動，正好在兩個維度都須要反向移動，因此爲負值。
   
   這個方式是否是頗有用？經過設置偏移數值就能找到圖片上須要顯示的區域。
   注意，這個方式存在一個問題，由於設定的偏移值都是固定的，致使無法作到圖像自適應。咱們在實現實現響應式設計時，圖片的大小會根據瀏覽器視口的大小進行縮放調整，而圖片的大小改變以後，偏移位置就須要改變，換句話說，圖片大小一調整，咱們想要顯示的圖像的位置在數值上也會改變。爲解決這個問題，咱們得用百分比的方式。

3. 百分比用法
   之因此百分比能解決上面的問題，由於它是一種表示相對偏移的方式，只要圖片等比縮放，圖像的相對位置是不變的。
   其實百分比用法和數值用法很相似，都須要先測量想要顯示的那塊圖像距離上邊界和左邊界的距離，另外還要測量整張圖片的高和寬。
   仍是以上面的圖片爲例，它的寬（X軸）是381px，高（Y軸）是509px，紅色P的X軸偏移值是128px，Y軸偏移值是384px，紅色P是長度爲125px的正方形。
   看到這裏心想X軸的百分比偏移量就是 128px/381px ≈ 33.5958%，Y軸 384px/509px ≈ 75.442%，而後設置background-position: 33.5958% 75.442%; 
   
   但是看到的結果倒是這樣的，真是坑爹啊。
   
   實際上，通過實踐發現，它用的另外一個公式來計算
   X軸百分比：X軸偏移值 / (圖片寬度 - 要顯示圖像的寬度) * 100
   Y軸百分比：Y軸偏移值 / (圖片高度 - 要顯示圖像的高度) * 100
   應用到例子：X軸爲128px / (381px - 125px) = 0.5，Y軸384px / (509px - 125px) = 1，所以結果就是50%和100%。
   

   .icon {
   	width: 125px; // 根據須要等比設定元素大小便可實現自適應
   	height: 125px;
   	background-image: url('../assets/images/icon_sprites.png');
   	background-position: 50% 100%; // 偏移量設置爲百分比
   	background-size: 381px 509px; // 根據須要等比設定圖片大小便可實現自適應
   }

   
   

以上就是background-position的基本用法。

參考文檔:
W3School CSS background-position 屬性
CSS: Using Percentages in Background-Image