疑惑解答： CSS中背景圖片的background-position屬性問題

CSS中背景圖CSS中背景圖片的background-position中的left top到底是相對於誰的？如果你也遇到了這樣的疑惑，就繼續看完這篇文章吧。

在學習的時候遇到了如下問題：

1. CSS中背景圖片的background-position中的left top到底是相對於誰的，content-box?padding-box?border-box?

2. background屬性中的backgound-image和background-color相對的box是一致的嗎？

3. 如何做到背景圖片位於容器的右邊10px,底邊10px？

首先我們來看一下盒模型：盒模型從外到內依次為：margin-box,border-box,padding-box,content-box.

現在我們來解答一下我們我們遇到的第一個問題，及background-position中的left top是相對於哪個box。答案是相對於padding-box的外邊沿。

下面的HTML代碼和CSS代碼分別實現給一個class=“myp”的容器設定一副背景圖片，背景圖片的background-position屬性值為left top。HTML代碼如下：

1 <p class="myp"></p>

CSS代碼如下：

1 .myp{2         height:300px;3         width:400px;4         border:10px solid black;5         padding:20px;6         background: url("road.png") no-repeat top left ;7      }

效果如下：

大家可以看到myp的padding設定為20px，圖中綠色代表padding，背景圖片的左上方剛好和綠色的padding的外邊沿對齊，所以第一個問題的答案就是為padding-box;

剛才我們看到背景圖片是相對於padding-box的外邊沿的。現在我們來看第二個問題，background屬性中背景圖片和背景顏色相對的box是一致的嗎？

就剛才的例子，我們稍微改動一下CSS代碼，設定一個粉色的背景，邊框設定為虛線，改動後的CSS代碼如下：

.myp{        height:300px;        width:400px;        border:10px dashed black;        padding:20px;        background: url("road.png") no-repeat top left pink ;

效果如下：大家可以看到背景顏色是伸展到了border之下的。說明了背景顏色是相對於border-box的外邊沿的。所以大家記清楚了，背景圖片和背景顏色的相對的box是不一致的。

現在我們來看第三個問題：如何做到背景圖片位於容器的右邊20px,底邊20px？

我們知道如果僅僅background-position：right bottom的話，背景圖片是僅僅貼著邊框的，如所示，這樣看起來特別醜，我們所希望的是背景圖片和邊框之間有個padding的距離。

其實CSS3是支援相對任意角來位移的，只要我們在位移量前端指定關鍵字，我們將背景位置改為background-position：right 20px bottom 20px;具體的CSS的代碼如下：

1 2 3 4 5 6 7 8

.myp{ height:300px; width:400px; border:10px solid black; padding:20px; background: url("road.png") no-repeat; background-position:right 20px bottom 20px; }

效果如下：

此外如果我們還有一種方法，及將background-origin屬性設定為content-box，（background-origin屬性預設值為為padding-box，即相對於padding框來設定背景）這樣就能讓背景圖片相對於content-box設定了。CSS代碼如下：

.myp{        height:300px;        width:400px;        border:10px solid black;        padding:20px;        background: url("road.png") no-repeat right bottom;        background-origin: content-box;     }

效果如下：

當然我們還可以用CSS的calc()函數，以相對於左上方位移來計算，我們通過100%-20px,100%-20px通過能得到，只是比較麻煩了，CSS代碼如下：

apache php mysql

1 .myp{2         height:300px;3         width:400px;4         border:10px solid black;5         padding:20px;6         background: url("road.png") no-repeat right bottom;7         background-position:calc(100% - 20px) calc(100% - 20px);8      }

相關文章：

css中background-position屬性用法總結

網頁中css background背景圖和背景顏色的設定方法

相關視頻：

CSS深入理解之border視頻教程