很多小伙伴看到這個(gè)標(biāo)題估計(jì)看都不想看戚炫，background-position這屬性有啥可講的嘛稠肘，都用過無(wú)數(shù)遍了猖毫，只不過我們大多數(shù)情況下都是用的簡(jiǎn)寫方式background保礼，比如這樣：
.box{
background: url('../images/bg.jpg') no-repeat center;
}
最后的那個(gè)center其實(shí)就是background-position值吃度，就是告訴瀏覽器我這個(gè)背景圖片要定位在元素box的中間位置义钉。
看起來(lái)確實(shí)很簡(jiǎn)單，沒什么可講的规肴，但是你真的對(duì)它所有用法都了如指掌嗎捶闸？
一、關(guān)鍵字（top拖刃、bottom删壮、left、right兑牡、center）
1. 兩個(gè)值
background-position可以取兩個(gè)值央碟，一個(gè)為橫軸方向，一個(gè)為縱軸方向均函。
比如你想要把背景圖定位在右下角亿虽，只需這樣寫：
background-position: right bottom;
So easy! 當(dāng)然你也闊以把順序反過來(lái)，絲毫沒影響苞也！
background-position: bottom right;
但是需要注意的是洛勉，僅僅在兩個(gè)值都為關(guān)鍵字時(shí)才無(wú)關(guān)其順序，因?yàn)楦鶕?jù)關(guān)鍵字瀏覽器就能自動(dòng)識(shí)別它是橫軸方向還是縱軸方向如迟。
要是你像下面這么寫收毫，那就掛了……
background-position: bottom 0;
2. 單個(gè)值
background-position取單個(gè)值時(shí)攻走，另一個(gè)值默認(rèn)設(shè)為center。例如：
background-position: top;
相當(dāng)于：
background-position: top center;
/* 或者 */
background-position: center top;
3. 偏移值
上面這些貌似挺好用此再，但是卻還不夠靈活昔搂，包括下面即將講到的長(zhǎng)度值和百分值也同樣不夠靈活（都是相對(duì)左側(cè)或頂部定位），如果我想要距離右側(cè)和底部定位且還需有一定距離該怎么辦呢输拇？
其實(shí)也很簡(jiǎn)單摘符，在關(guān)鍵字后再加個(gè)具體距離值即可，這個(gè)值可以是下面要講到的長(zhǎng)度值或百分?jǐn)?shù)值策吠，例如：
background-position: bottom 10px right 10%;
/*背景圖底部距離盒子底部10px逛裤，參考點(diǎn)距離盒子右側(cè)10%，參考點(diǎn)下面會(huì)講到*/
background-position: bottom 10px right;
/*偏移值也可以省略奴曙，省略其實(shí)就相當(dāng)于0px*/
需要注意的是關(guān)鍵字center無(wú)法設(shè)置偏移值，例如下面的寫法是錯(cuò)誤的草讶。
background-position: center 10% top; /*錯(cuò)誤寫法*/
二洽糟、長(zhǎng)度值
這個(gè)好理解，就是那些數(shù)字后面帶單位的具體值堕战，比如：10px坤溃、1em等等。
1. 兩個(gè)值
此時(shí)取值就不像關(guān)鍵字用法這么靈活了嘱丢，它必須嚴(yán)格按照第一個(gè)值為距左邊的長(zhǎng)度值薪介，第二個(gè)值為距頂邊的長(zhǎng)度值，順序不能顛倒越驻，因?yàn)槟阌譀]標(biāo)明方向汁政，我（瀏覽器）怎么知道？
例如缀旁，你想要讓背景圖定位在距左邊10px记劈、距頂邊20px的位置，就可以這么寫：
background-position: 10px 20px;
2. 單個(gè)值
這個(gè)其實(shí)跟上面講關(guān)鍵字時(shí)的單個(gè)取值基本是一樣的并巍，都是將第二個(gè)值默認(rèn)設(shè)置為center目木，唯一區(qū)別就是這個(gè)center只能放在這個(gè)長(zhǎng)度值后面，也就是在縱軸方向居中懊渡。例如：
background-position: 10px;
相當(dāng)于：
background-position: 10px center;
/* 橫軸方向距離元素左側(cè)10px刽射，縱軸方向居中 */
三、百分?jǐn)?shù)值
這個(gè)跟上面的長(zhǎng)度值用法很像剃执，只不過百分?jǐn)?shù)值是個(gè)相對(duì)于盒子寬高的百分?jǐn)?shù)誓禁，還有就是不僅只是在相對(duì)于盒子上有個(gè)百分比，在背景圖本身也有個(gè)百分比肾档。
舉個(gè)簡(jiǎn)單例子：
background-position: 10% 50%;
這個(gè)是什么意思呢现横？背景圖左側(cè)距離盒子左側(cè)的距離是盒子寬度的10%？背景圖頂部距離盒子頂部距離是盒子高度的50%？
錯(cuò)戒祠！都錯(cuò)了：Я健！姜盈！
如果是長(zhǎng)度值的話低千，那么背景圖是拿其左上角來(lái)相對(duì)盒子的左上角進(jìn)行定位，但百分?jǐn)?shù)值不是馏颂，它是拿其自身的(10%,50%)這個(gè)位置的點(diǎn)來(lái)相對(duì)盒子的左上角進(jìn)行定位示血，上面這個(gè)例子的效果其實(shí)和下面這個(gè)效果是一樣的。
background-position: 10% center;
如果還不好理解救拉，再看下面這個(gè)示意圖你就明白了难审。
這是一個(gè)100px*100px的盒子，里面有張50px*50px的背景圖亿絮，這個(gè)背景圖就設(shè)置background-position: 10% 50%這個(gè)樣式告喊。然后你會(huì)發(fā)現(xiàn)，背景圖左側(cè)距盒子左側(cè)距離為5px派昧，而不是100*10%=10px黔姜，因?yàn)榇藭r(shí)的定位參考系并不是圖片的左側(cè)。同樣的蒂萎，縱軸方向是垂直居中的秆吵，也不是100*50%=50px。此時(shí)的定位參考點(diǎn)是圖片中(5px,25px)的這個(gè)點(diǎn)五慈，而不是圖片的左上角纳寂，這個(gè)點(diǎn)的位置是根據(jù)圖片的寬高來(lái)計(jì)算的。
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;
相關(guān)推薦
重點(diǎn)總結(jié)
①
background-position可以設(shè)置關(guān)鍵字，包括top聪轿、bottom爷肝、left、right陆错、center灯抛，還可以在關(guān)鍵字后設(shè)置相應(yīng)的偏移量（center除外）
②background-position可以設(shè)置長(zhǎng)度值和百分?jǐn)?shù)值，長(zhǎng)度值的定位參考點(diǎn)是在圖片左上角音瓷，而百分?jǐn)?shù)值不是
