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

- 關鍵詞，比如top、right、bottom、left和center

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

- 百分值%

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

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

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

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

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

2.使用絕對值的效果

當你用絕對值指定位置時，就是使背景圖片偏離左上角一個特定的量。換句話說，圖片會移動離開放置區左上角達到你在background-position中指定的偏移量

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

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

3.使用百分比的效果

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

例如，絕對值位置0% 0%，會讓圖片0% 0%的點與背景放置區坐標系0% 0%的點對齊。絕對值位置50% 70%會把圖片橫向50%豎直70%的點與背景放置區橫向50%豎直70%的點對齊

和使用絕度值一樣，百分比也可以有負數，負數移動圖片到坐標軸相反的方向上

4.相對任意邊緣的偏移

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

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

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

實例：

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

5.你所不知道的background-position

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

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

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

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

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

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

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

總結：background-origin用來定義background-position的原點位置；而background-position用來設置圖片相對原點的位置

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。