CSS背景定位屬性——background-position

很多小伙伴看到這個標題估計看都不想看,background-position這屬性有啥可講的嘛,都用過無數遍了,只不過我們大多數情況下都是用的簡寫方式background,比如這樣:

.box{    background: url('../images/bg.jpg') no-repeat center;}

最后的那個center其實就是background-position值,就是告訴瀏覽器我這個背景圖片要定位在元素box的中間位置。

看起來確實很簡單,沒什么可講的,但是你真的對它所有用法都了如指掌嗎?

一、關鍵字(top、bottom、left、right、center)

1. 兩個值

background-position可以取兩個值,一個為橫軸方向,一個為縱軸方向。

比如你想要把背景圖定位在右下角,只需這樣寫:

background-position: right bottom;

So easy! 當然你也闊以把順序反過來,絲毫沒影響!

background-position: bottom right;

但是需要注意的是,僅僅在兩個值都為關鍵字時才無關其順序,因為根據關鍵字瀏覽器就能自動識別它是橫軸方向還是縱軸方向。

要是你像下面這么寫,那就掛了……

background-position: bottom 0;

2. 單個值

background-position取單個值時,另一個值默認設為center。例如:

background-position: top;

相當于:

background-position: top center;/* 或者 */background-position: center top;

3. 偏移值

上面這些貌似挺好用,但是卻還不夠靈活,包括下面即將講到的長度值和百分值也同樣不夠靈活(都是相對左側或頂部定位),如果我想要距離右側和底部定位且還需有一定距離該怎么辦呢?

其實也很簡單,在關鍵字后再加個具體距離值即可,這個值可以是下面要講到的長度值或百分數值,例如:

background-position: bottom 10px right 10%;/*背景圖底部距離盒子底部10px,參考點距離盒子右側10%,參考點下面會講到*/background-position: bottom 10px right;/*偏移值也可以省略,省略其實就相當于0px*/

需要注意的是關鍵字center無法設置偏移值,例如下面的寫法是錯誤的。

background-position: center 10% top;  /*錯誤寫法*/

二、長度值

這個好理解,就是那些數字后面帶單位的具體值,比如:10px、1em等等。

1. 兩個值

此時取值就不像關鍵字用法這么靈活了,它必須嚴格按照第一個值為距左邊的長度值,第二個值為距頂邊的長度值,順序不能顛倒,因為你又沒標明方向,我(瀏覽器)怎么知道?

例如,你想要讓背景圖定位在距左邊10px、距頂邊20px的位置,就可以這么寫:

background-position: 10px 20px;

2. 單個值

這個其實跟上面講關鍵字時的單個取值基本是一樣的,都是將第二個值默認設置為center,唯一區別就是這個center只能放在這個長度值后面,也就是在縱軸方向居中。例如:

background-position: 10px;

相當于:

background-position: 10px center;/* 橫軸方向距離元素左側10px,縱軸方向居中 */

三、百分數值

這個跟上面的長度值用法很像,只不過百分數值是個相對于盒子寬高的百分數,還有就是不僅只是在相對于盒子上有個百分比,在背景圖本身也有個百分比。

舉個簡單例子:

background-position: 10% 50%;

這個是什么意思呢?背景圖左側距離盒子左側的距離是盒子寬度的10%?背景圖頂部距離盒子頂部距離是盒子高度的50%?

錯!都錯了!!!

如果是長度值的話,那么背景圖是拿其左上角來相對盒子的左上角進行定位,但百分數值不是,它是拿其自身的(10%,50%)這個位置的點來相對盒子的左上角進行定位,上面這個例子的效果其實和下面這個效果是一樣的。

background-position: 10% center;

如果還不好理解,再看下面這個示意圖你就明白了。

background-position: 10% 50%

這是一個100px*100px的盒子,里面有張50px*50px的背景圖,這個背景圖就設置background-position: 10% 50%這個樣式。然后你會發現,背景圖左側距盒子左側距離為5px,而不是100*10%=10px,因為此時的定位參考系并不是圖片的左側。同樣的,縱軸方向是垂直居中的,也不是100*50%=50px。此時的定位參考點是圖片中(5px,25px)的這個點,而不是圖片的左上角,這個點的位置是根據圖片的寬高來計算的。

50 * 10% = 5px;50 * 50% = 25px;

四、混合用法

以上三種背景定位屬性值可以混合使用,例如:

background-position: 10px center;background-position: 10px 10%;background-position: right 10px bottom;background-position: right 10% bottom 10px;

重點總結

① background-position可以設置關鍵字,包括top、bottom、left、right、center,還可以在關鍵字后設置相應的偏移量(center除外) ② background-position可以設置長度值和百分數值,長度值的定位參考點是在圖片左上角,而百分數值不是