建站
咨詢
售后
建站咨詢
新聞中心
了解CSS中背景圖片的background-position屬性會出現(xiàn)的問題？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的，希望通過這個文章能讓大家收獲頗深，下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
從2013年開始創(chuàng)新互聯(lián)公司專注于”幫助中小企業(yè)+互聯(lián)網(wǎng)”, 也是目前成都地區(qū)具有實力的互聯(lián)網(wǎng)服務(wù)商。團(tuán)隊致力于為企業(yè)提供--站式網(wǎng)站建設(shè)、移動端應(yīng)用( H5手機營銷、App定制開發(fā)、微信開發(fā))、軟件開發(fā)、信息化解決方案等服務(wù)。
在學(xué)習(xí)的時候遇到了如下問題：
CSS中背景圖片的background-position中的left top到底是相對于誰的，content-box?padding-box?border-box?
background屬性中的backgound-image和background-color相對的box是一致的嗎？
如何做到背景圖片位于容器的右邊10px,底邊10px？
首先我們來看一下盒模型：盒模型從外到內(nèi)依次為：margin-box,border-box,padding-box,content-box.
.jpg)
現(xiàn)在我們來解答一下我們我們遇到的第一個問題，及background-position中的left top是相對于哪個box。答案是相對于padding-box的外邊沿。
下面的HTML代碼和CSS代碼分別實現(xiàn)給一個class=“myp”的容器設(shè)置一副背景圖片，背景圖片的background-position屬性值為left top。HTML代碼如下：
1
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設(shè)置為20px，圖中綠色代表padding，背景圖片的左上角剛好和綠色的padding的外邊沿對齊，所以第一個問題的答案就是為padding-box;
剛才我們看到背景圖片是相對于padding-box的外邊沿的。現(xiàn)在我們來看第二個問題，background屬性中背景圖片和背景顏色相對的box是一致的嗎？
就剛才的例子，我們稍微改動一下CSS代碼，設(shè)置一個粉色的背景，邊框設(shè)置為虛線，改動后的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是不一致的。
現(xiàn)在我們來看第三個問題：如何做到背景圖片位于容器的右邊20px,底邊20px？
我們知道如果僅僅background-position：right bottom的話，背景圖片是僅僅貼著邊框的，如下圖所示，這樣看起來特別丑，我們所希望的是背景圖片和邊框之間有個padding的距離。
其實CSS3是支持相對任意角來偏移的，只要我們在偏移量前端指定關(guān)鍵字，我們將背景位置改為background-position：right 20px bottom 20px;具體的CSS的代碼如下：
1 2 3 4 5 6 7 8 |
|
效果如下：
此外如果我們還有一種方法，及將background-origin屬性設(shè)置為content-box，（background-origin屬性默認(rèn)值為為padding-box，即相對于padding框來設(shè)置背景）這樣就能讓背景圖片相對于content-box設(shè)置了。CSS代碼如下：
.myp{
height:300px;
width:400px;
border:10px solid black;
padding:20px;
background: url("road.png") no-repeat right bottom;
background-origin: content-box;
}效果如下：
當(dāng)然我們還可以用CSS的calc()函數(shù)，以相對于左上角偏移來計算，我們通過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 }感謝各位看完上述內(nèi)容，你們對“CSS中背景圖片的background-position屬性會出現(xiàn)的問題”這篇文章大概了解了嗎？希望文章的內(nèi)容對大家有所幫助，如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題：CSS中背景圖片的background-position屬性會出現(xiàn)的問題
本文網(wǎng)址：http://fisionsoft.com.cn/article/iidccc.html
