background系列之你不知道的background-position

這是一個有趣的話題

其實我並不確切的平時大家是怎麼去應用或者玩轉一個屬性，一個值。我能肯定的是這些東西都有不少的可玩性。

我今天要聊的 background-position 應該已經被大家玩得色彩斑斕了。尤其是 CSS Sprites 流行的這些年，background-position 基本上是被應用最多的屬性之一。

重拾舊趣

我們知道 background-position 是用來指定背景影像的偏移值的，能讓一張圖從特定的位置開始展現。而 CSS Sprites 就是通過將多個小圖拼接成一張大圖，然後利用 background-position 來指定需要顯示的區域，以此達到合併HTTP請求的預期。

 

一個足夠簡單的應用

為了回顧 background-position 的應用，接下來我將會用一個最簡單的例子來代入，這裡有一張由2個 300*100px 垂直拼接而成的圖片作為背景圖，如 圖0：

我現在需要 圖0 在2個並排的div中分別顯示不同的部分：

HTML:

於是我寫了段簡單的CSS，如下：

CSS:

很顯然我可以得到預期，效果如 圖1：

這就是最典型的 CSS Sprites 使用場景。當然，你可以線上檢視這個例子 Demo1 最簡單的 background-position 應用。

預設值

由於 background-position 的預設值是 0% 0%，那麼上述的CSS程式碼其實可以優化成：

因為 .part1 指定的值是 0 0，和預設值相同，所以可以省略。你會發現，對一個屬性瞭解得更多，就更能幫助你寫出簡潔的程式碼。

百分比

我並不能確定大家是否使用過 background-position 的百分比，這裡就權當大家對此並不甚瞭解。

試著使用百分比去實現上個例子

我相信肯定有童鞋會這樣寫：

按照一般的思維，上述兩行程式碼應該是等價的，不是麼？在開篇的時候我們就說了背景圖 圖0 的高度是 200px，那麼 -50% 正好是 -100px。

不用著急，我們會用實際的例子來驗證這個結果，來看 Demo2 檢驗 background-position 的百分比值。

結果讓人有點憂傷，這和我們的設想有點出入，這是為什麼呢？

追本溯源

我們都知道一個百分比值，必然會需要有一個參照尺寸。舉個例子來講，假設我定義一個元素的寬度是 50%，那麼這個元素的具體寬度就是：包含塊寬度 * 50%。

所以，如果你需要使用百分比作為 background-position 的值，必須清楚它的參照尺寸是什麼。

w3c 是這樣描述 background-position 比分比值的：

原文：refer to size of background positioning area minus size of background image.

翻譯：參照指定背景區域的尺寸減去背景圖片的尺寸

這是什麼意思呢？白話一點說：background-position 的百分比值參照的是設定背景的區域減去背景圖的尺寸。

再出發

按照這個思路，我們將：

換算一下將會得到：

換算過程為：(設定背景的區域高度 – 背景圖的高度) * -50%，即：(100 – 200) * -50% = 50px

這就解釋了 Demo2 為什麼會得到 圖2 的效果。但這顯然並不是我們想要的，我們預期的效果是 圖1。

根據上述的公式，我們可以逆推預期效果的百分比值是多少：

所以如果你要使用百分比，那麼定義應該是這樣的：

其結果如 Demo3 正確使用 background-position 百分比

這會終於得到我們的預期效果了，請看 圖3

瞭解了百分比的這個特性後，會幫助我們大大簡化某些定義，比如我在 Yo 裡面對 yo-score 的處理，非常巧妙，有興趣的童鞋可以自己研究一下，這裡不細講。

另外：需要注意的是百分比值會受 background-size 影響，因為 background-size 可以改變背景影像的大小。

多值

在 CSS3 中，對 background-position 屬性進行了擴充套件，允許接受3到4個引數，用於指定背景圖的起始方向和具體位置。

原文：If three or four values are given, then each or represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given.

翻譯：如果指定了三個或四個值，那麼每個 或 之前必須有一個關鍵字，用於指定該方向的偏移量。

當指定3到4個引數時，不接受 center 關鍵字作為偏移量作為邊界，只能使用 top, right, bottom, left 這4個關鍵字。

多值的意義

在此前，我們使用 background-position 只能讓背景圖從 top, right, bottom, left, center 這5個邊界開始顯示，但無法指定任意一個邊界的偏移量。

舉個例子：我想讓一個背景圖從右下角偏移 20px

你會發現如果沒有多值擴充套件，你很難輕易做到這件事，除非你能確定容器的寬高永遠都是顯式定義好的，就算如此，其靈活性也一文不值。

多值的應用

如果利用多值特性，這將變得非常輕鬆，我們仍使用 圖0 作為背景圖，來做一個演示。

這會終於得到我們的預期效果了，請看 圖4

效果可以檢視 Demo4 background-position 邊界偏移。實際上，有了多值之後，我們可以讓背景圖在任意方位上偏移，你可能會發現，這甚至可以讓你的結構寫得更簡單，巢狀變淺。

寫在最後

當你深入瞭解了每個屬性的每個定義，你的CSS世界又會變得和以前不一樣。enjoy it.