CSS中背景圖片的background-position屬性會(huì)出現(xiàn)的問(wèn)題

了解CSS中背景圖片的background-position屬性會(huì)出現(xiàn)的問(wèn)題？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的，希望通過(guò)這個(gè)文章能讓大家收獲頗深，下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

從2013年開(kāi)始創(chuàng)新互聯(lián)公司專(zhuān)注于”幫助中小企業(yè)+互聯(lián)網(wǎng)”, 也是目前成都地區(qū)具有實(shí)力的互聯(lián)網(wǎng)服務(wù)商。團(tuán)隊(duì)致力于為企業(yè)提供--站式網(wǎng)站建設(shè)、移動(dòng)端應(yīng)用( H5手機(jī)營(yíng)銷(xiāo)、App定制開(kāi)發(fā)、微信開(kāi)發(fā))、軟件開(kāi)發(fā)、信息化解決方案等服務(wù)。

在學(xué)習(xí)的時(shí)候遇到了如下問(wèn)題：

1. CSS中背景圖片的background-position中的left top到底是相對(duì)于誰(shuí)的，content-box?padding-box?border-box?

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

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

首先我們來(lái)看一下盒模型：盒模型從外到內(nèi)依次為：margin-box,border-box,padding-box,content-box.

現(xiàn)在我們來(lái)解答一下我們我們遇到的第一個(gè)問(wèn)題，及background-position中的left top是相對(duì)于哪個(gè)box。答案是相對(duì)于padding-box的外邊沿。

下面的HTML代碼和CSS代碼分別實(shí)現(xiàn)給一個(gè)class=“myp”的容器設(shè)置一副背景圖片，背景圖片的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設(shè)置為20px，圖中綠色代表padding，背景圖片的左上角剛好和綠色的padding的外邊沿對(duì)齊，所以第一個(gè)問(wèn)題的答案就是為padding-box;

剛才我們看到背景圖片是相對(duì)于padding-box的外邊沿的。現(xiàn)在我們來(lái)看第二個(gè)問(wèn)題，background屬性中背景圖片和背景顏色相對(duì)的box是一致的嗎？

就剛才的例子，我們稍微改動(dòng)一下CSS代碼，設(shè)置一個(gè)粉色的背景，邊框設(shè)置為虛線，改動(dòng)后的CSS代碼如下：

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

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

現(xiàn)在我們來(lái)看第三個(gè)問(wèn)題：如何做到背景圖片位于容器的右邊20px,底邊20px？

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

其實(shí)CSS3是支持相對(duì)任意角來(lái)偏移的，只要我們?cè)谄屏壳岸酥付P(guān)鍵字，我們將背景位置改為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屬性設(shè)置為content-box，（background-origin屬性默認(rèn)值為為padding-box，即相對(duì)于padding框來(lái)設(shè)置背景）這樣就能讓背景圖片相對(duì)于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ù)，以相對(duì)于左上角偏移來(lái)計(jì)算，我們通過(guò)100%-20px,100%-20px通過(guò)能得到，只是比較麻煩了，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)容，你們對(duì)“CSS中背景圖片的background-position屬性會(huì)出現(xiàn)的問(wèn)題”這篇文章大概了解了嗎？希望文章的內(nèi)容對(duì)大家有所幫助，如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：CSS中背景圖片的background-position屬性會(huì)出現(xiàn)的問(wèn)題
網(wǎng)頁(yè)路徑：http://bm7419.com/article22/iidccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、品牌網(wǎng)站建設(shè)、Google、面包屑導(dǎo)航、、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)