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=「myDiv」的容器設置一副背景圖片，背景圖片的background-position屬性值爲left top。HTML代碼以下：

1 <div class="myDiv"></div>

CSS代碼以下：

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

效果以下：

你們能夠看到myDiv的padding設置爲20px，圖中綠色表明padding，背景圖片的左上角恰好和綠色的padding的外邊沿對齊，因此第一個問題的答案就是爲padding-box;

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

就剛纔的例子，咱們稍微改動一下CSS代碼，設置一個粉色的背景，邊框設置爲虛線，改動後的CSS代碼以下：

.myDiv{
        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的代碼以下：

.myDiv{
        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代碼以下：

.myDiv{
        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代碼以下：

1 .myDiv{
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      }