1.作用：background-position是用來控制元素背景圖片的位置。以圖片的左上角頂點(diǎn)為原點(diǎn)，屬性值為正就代表圖片下移或右移，屬性值為負(fù)就代表圖片上移或左移。它接受三種值

- 關(guān)鍵詞，比如top、right、bottom、left和center

- 長度值，比如px、em、rem等

- 百分值%

在前面我們看到背景圖片默認(rèn)的被放置在放置區(qū)的左上角。這是由于background-position的默認(rèn)的值是0%,0%

位置屬性可以通過指定一個(gè)偏移量(關(guān)鍵詞、百分比或長度)、兩個(gè)偏移量(三種可能值取兩個(gè)組合)、或者四個(gè)偏移量(一個(gè)關(guān)鍵詞加一個(gè)相對數(shù)值)來描述

如果只提供了一個(gè)值，那么另一個(gè)方向即被假定為 center。如果提供了兩個(gè)值，第一個(gè)會決定距離左邊緣的偏移，即水平位置；第二個(gè)值會決定圖片從上邊緣向下的偏移，即豎直的位置

注意1：注意一對關(guān)鍵字可以交換順序，一個(gè)關(guān)鍵字和百分比或長度的組合不能。因此center left是合法的，50% left則不正確，必須是left 50%。當(dāng)使用一個(gè)關(guān)鍵字和一個(gè)長度或百分比的組合時(shí)，第一個(gè)值總是對應(yīng)水平偏移,第二個(gè)對應(yīng)豎直偏移

注意2：事實(shí)上，關(guān)鍵字是特定百分比值的簡寫，比如：top相當(dāng)于 距離上邊緣偏移0%，bottom相當(dāng)于距離上邊緣偏移100%，left相當(dāng)于距離左邊緣偏移0%，right相當(dāng)于距離左邊緣偏移100%，center相當(dāng)于距離任意它被應(yīng)用的方向偏移50%(水平或豎直)

2.使用絕對值的效果

當(dāng)你用絕對值指定位置時(shí)，就是使背景圖片偏離左上角一個(gè)特定的量。換句話說，圖片會移動(dòng)離開放置區(qū)左上角達(dá)到你在background-position中指定的偏移量

最好的解釋和理解的方式是看圖，這里有兩個(gè)絕對值background-position的例子，看看瀏覽器是怎樣解釋位置和放置背景圖片的。兩個(gè)示例中元素大小100px乘80px

絕對值也可以是負(fù)數(shù)，這種情況下圖片就會離開邊緣反方向上偏移

3.使用百分比的效果

不像使用絕對值的偏移量會從元素左上角移動(dòng)一個(gè)特定的距離，百分比X%偏移會把圖片水平寬度X%(或豎直高度X%)的點(diǎn)與容器橫向X%的點(diǎn)(或豎直高度X%) 對齊

例如，絕對值位置0% 0%，會讓圖片0% 0%的點(diǎn)與背景放置區(qū)坐標(biāo)系0% 0%的點(diǎn)對齊。絕對值位置50% 70%會把圖片橫向50%豎直70%的點(diǎn)與背景放置區(qū)橫向50%豎直70%的點(diǎn)對齊

和使用絕度值一樣，百分比也可以有負(fù)數(shù)，負(fù)數(shù)移動(dòng)圖片到坐標(biāo)軸相反的方向上

4.相對任意邊緣的偏移

上兩節(jié)的例子中我們設(shè)定、體驗(yàn)了圖片相對上邊緣和左邊緣的偏移的效果 (這對于有一個(gè)或兩個(gè)值的 background-position來說是默認(rèn)的)

當(dāng)使用組合關(guān)鍵詞和數(shù)值成四個(gè)值的語法時(shí)，你就也能夠指定背景圖片相對于右邊緣和底部邊緣的偏移了。為了這樣做，你只需要指出你要用的邊緣的名字，后面跟上你想要的偏移量就可以了

在使用四個(gè)值位置的語法時(shí)，一定要記得：當(dāng)給出三個(gè)或四個(gè)值的時(shí)候，每個(gè)百分比或絕對長度都必須跟在一個(gè)關(guān)鍵詞后面，用來指定從哪個(gè)邊緣上偏移。例如：background-position: bottom 10px right 20px代表 豎直從下邊緣偏移10px，水平從右邊緣偏移20px。如果三個(gè)值已經(jīng)指定好了，沒給出的被假定為0。如果你給出了兩個(gè)數(shù)值偏移量或一個(gè)關(guān)鍵詞，那么值是無效的，瀏覽器會使用默認(rèn)值0% 0%

實(shí)例：

第一張背景圖background-position:10px 10px；第二張背景圖background-position: center

5.你所不知道的background-position

前面也說過了，background-position取值除了長度值（<length>）和關(guān)鍵詞之外，還可以取值為百分比值。當(dāng)然大家也使用過百分比值，比如:

那么問題來了，你真的了解background-position取值為百分比的計(jì)算比例嗎？如果我的百分比值不是和關(guān)鍵詞對等的值呢？那么它是怎么計(jì)算的？這一系列的問題，你是否有仔細(xì)的思考過。就我個(gè)人而言，我以前所理解也存在一個(gè)誤區(qū)

我一直錯(cuò)誤的理解為background-position百分比值，它是相對于背景圖片的尺寸

實(shí)際上，當(dāng)背景圖片尺寸（background-size）不做任何的重置（也就是100% 100%）時(shí)，水平百分比的值等于容器寬度百分比值減去背景圖片寬度百分比值。垂直百分比的值等于容器高度百分比值減去背景圖片高度百分比值

比如前面的示例，如果取值background-position: 75% 50%;，背景圖片的起始位置

- 水平位置（x軸）：(410 - 100) * 75% = 232.5px

- 垂直位置（y軸）：(210 - 100) * 50% = 55px

總結(jié)：background-origin用來定義background-position的原點(diǎn)位置；而background-position用來設(shè)置圖片相對原點(diǎn)的位置

總結(jié)

以上是生活随笔為你收集整理的CSS之background-position属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。