做者:杜瑤(@doyoe)css
網址:http://blog.doyoe.com/2016/03/28/css/background系列之你不知道的background-position/前端
這是一個有趣的話題css3
其實我並不確切的平時你們是怎麼去應用或者玩轉一個屬性,一個值。我能確定的是這些東西都有很多的可玩性。post
我今天要聊的 background-position 應該已經被你們玩得色彩斑斕了。尤爲是 CSS Sprites 流行的這些年,background-position 基本上是被應用最多的屬性之一。優化
重拾舊趣url
咱們知道 background-position 是用來指定背景圖像的偏移值的,能讓一張圖從特定的位置開始展示。而 CSS Sprites 就是經過將多個小圖拼接成一張大圖,而後利用 background-position 來指定須要顯示的區域,以此達到合併HTTP請求的預期。spa
一個足夠簡單的應用翻譯
爲了回顧 background-position 的應用,接下來我將會用一個最簡單的例子來代入,這裏有一張由2個 300*100px 垂直拼接而成的圖片做爲背景圖,如 圖0:orm
圖0:簡單的文字圖片htm
我如今須要 圖0 在2個並排的div中分別顯示不一樣的部分:
<div class="part1"><!-- 顯示圖0上半部分 --></div>
<div class="part2"><!-- 顯示圖0下半部分 --></div>
因而我寫了段簡單的CSS,以下:
CSS:
div {
width: 300px;
height: 100px;
background: gray url(../test.png) no-repeat;
}
.part1 {
background-position: 0 0;
}
.part2 {
background-position: 0 -100px;
}
很顯然我能夠獲得預期,效果如 圖1:
圖1:簡單的CSS Sprites應用
這就是最典型的 CSS Sprites 使用場景。固然,你能夠在線查看這個例子 Demo1 最簡單的 background-position 應用(http://demo.doyoe.com/css3/background-position/normal.htm)。
默認值
因爲 background-position 的默認值是 0% 0%,那麼上述的CSS代碼其實能夠優化成:
.part2 {
background-position: 0 -100px;
}
由於 .part1 指定的值是 0 0,和默認值相同,因此能夠省略。你會發現,對一個屬性瞭解得更多,就更能幫助你寫出簡潔的代碼。
百分比
我並不能肯定你們是否使用過 background-position 的百分比,這裏就權當你們對此並不甚瞭解。
試着使用百分比去實現上個例子
我相信確定有童鞋會這樣寫:
.part2 {
/* background-position: 0 -100px; */
background-position: 0 -50%;
}
按照通常的思惟,上述兩行代碼應該是等價的,不是麼?在開篇的時候咱們就說了背景圖 圖0 的高度是 200px,那麼 -50% 正好是 -100px。
不用着急,咱們會用實際的例子來驗證這個結果,來看 Demo2 檢驗 background-position 的百分比值(http://demo.doyoe.com/css3/background-position/percentage.htm)。
圖2:參照尺寸驗證
結果讓人有點憂傷,這和咱們的設想有點出入,這是爲何呢?
追本溯源
咱們都知道一個百分比值,必然會須要有一個參照尺寸。舉個例子來說,假設我定義一個元素的寬度是 50%,那麼這個元素的具體寬度就是:包含塊寬度 * 50%。
因此,若是你須要使用百分比做爲 background-position 的值,必須清楚它的參照尺寸是什麼。
w3c 是這樣描述 background-position 比分比值的:
原文:refer to size of background positioning area minus size of background image.
翻譯:參照指定背景區域的尺寸減去背景圖片的尺寸
這是什麼意思呢?白話一點說:background-position 的百分比值參照的是設置背景的區域減去背景圖的尺寸。
再出發
按照這個思路,咱們將:
.part2 {
background-position: 0 -50%;
}
換算一下將會獲得:
.part2 {
background-position: 0 50px;
}
換算過程爲:(設置背景的區域高度 – 背景圖的高度) * -50%,即:(100 – 200) * -50% = 50px
這就解釋了 Demo2 爲何會獲得 圖2 的效果。但這顯然並非咱們想要的,咱們預期的效果是 圖1。
根據上述的公式,咱們能夠逆推預期效果的百分比值是多少:
-100 / (100 - 200) = 100%
因此若是你要使用百分比,那麼定義應該是這樣的:
.part2 {
background-position: 0 100%;
}
其結果如 Demo3 正確使用 background-position 百分比(http://demo.doyoe.com/css3/background-position/percentage-value.htm)
這會終於獲得咱們的預期效果了,請看 圖3
圖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 做爲背景圖,來作一個演示。
.demo {
width: 400px;
height: 400px;
background: url(../test.png) no-repeat;
background-position: right -300px bottom 20px;
}
這會終於獲得咱們的預期效果了,請看 圖4
圖4:背景圖多值應用
效果能夠查看 Demo4 background-position 邊界偏移。實際上,有了多值以後,咱們可讓背景圖在任意方位上偏移,你可能會發現,這甚至可讓你的結構寫得更簡單,嵌套變淺。