規(guī)定背景的繪制區(qū)域

瀏覽器支持

IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。

注釋：Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。

有三個(gè)值：

border-box ??背景被裁剪到邊框盒。　　

padding-box ??背景被裁剪到內(nèi)邊距框。

content-box ?背景被裁剪到內(nèi)容框

demo：

.clip{width:400px;margin: 50px auto;background-color: red;padding: 20px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}

border-box

?

padding-box

?

content-box

?

?

其實(shí)background-clip的真正作用是決定背景在哪些區(qū)域顯示。如果它的值為border,則背景在元素的邊框、補(bǔ)白和內(nèi)容區(qū)域都會(huì)顯示；如果值為padding,則背景只會(huì)在補(bǔ)白和內(nèi)容區(qū)域顯示；如果值為content，則背景只會(huì)在內(nèi)容區(qū)域顯示。

那為毛前面的background-clip:border不起作用？這就得說(shuō)說(shuō)background-origin了

background-origin是指背景顯示的區(qū)域，或者說(shuō)背景是從哪個(gè)區(qū)域開(kāi)始繪制的(邊框、補(bǔ)白或內(nèi)容區(qū)域)。

還不理解的話那就這么來(lái)說(shuō)吧，background-position總該知道吧？它指定了背景的位置，比如background-position:0px 0px ；那這個(gè)0像素是指相對(duì)于哪里來(lái)說(shuō)的呢？這就涉及到一個(gè)參照點(diǎn)的問(wèn)題了。background-origin的作用就是指定background-position的參照點(diǎn)是在邊框區(qū)域的左上角，還是在補(bǔ)白區(qū)域的左上角，或是在內(nèi)容區(qū)域的左上角，對(duì)應(yīng)的三個(gè)值就分別是border、padding、content. background-position的也可以是left、right等方向詞語(yǔ)，這時(shí)候就不能說(shuō)參照點(diǎn)了，而應(yīng)該說(shuō)參照面，如果值為background-origin的值為border,則參照面包括邊框區(qū)域、補(bǔ)白區(qū)域、內(nèi)容區(qū)域三個(gè)部分，如果值為padding,則參照面只包括補(bǔ)白區(qū)域和內(nèi)容區(qū)域，如果值為content,則不用我講了吧。

這個(gè)時(shí)候再來(lái)看看前面那個(gè)問(wèn)題就豁然開(kāi)朗了，你把background-clip設(shè)為border,這時(shí)候邊框里是能顯示背景的，但問(wèn)題是背景并不是從邊框的左上角開(kāi)始繪制的，它是從補(bǔ)白區(qū)域才開(kāi)始繪制的，女神背景壓根就沒(méi)想要搭理屌絲邊框，你屌絲擺出一個(gè)懷抱來(lái)迎接女神又有個(gè)屁用啊，趕緊細(xì)軟跑吧。background-origin的默認(rèn)值是padding,也就是默認(rèn)從補(bǔ)白區(qū)域開(kāi)始繪制背景。

demo:當(dāng)背景是圖片是background-origin：border-box。與background-clip：border-box。顯示時(shí)有區(qū)別，如果都是背景顏色，沒(méi)有區(qū)別，background-origin控制的是背景圖片顯示的區(qū)域，不會(huì)影響背景顏色

?

?

demo：

.clip{width:400px;margin: 50px auto;background-image: url("images/1.jpg");background-repeat: no-repeat;background-position: left top;background-color: red;overflow: hidden;padding: 20px;height:200px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}.origin-content{-webkit-background-origin: content-box;background-origin: content-box;}.origin-border{-webkit-background-origin: border-box;background-origin: border-box;}.origin-padding{-webkit-background-origin: padding-box;background-origin: padding-box;}

　　

發(fā)現(xiàn)一個(gè)小問(wèn)題：

當(dāng)設(shè)置背景backgroud-position：center center時(shí)，background-origin不起作用，background-clip：border-box可以讓背景顏色繪制在邊框上（不太明白，希望懂得人可以指教）

修改上面的代碼：

.clip{background-position: center center;}

　　效果圖

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaofenguo/p/6074863.html

總結(jié)

以上是生活随笔為你收集整理的background-clip与background-origin的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。