規定背景的繪制區域

瀏覽器支持

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

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

有三個值：

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

padding-box ??背景被裁剪到內邊距框。

content-box ?背景被裁剪到內容框

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

?

?

其實background-clip的真正作用是決定背景在哪些區域顯示。如果它的值為border,則背景在元素的邊框、補白和內容區域都會顯示；如果值為padding,則背景只會在補白和內容區域顯示；如果值為content，則背景只會在內容區域顯示。

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

background-origin是指背景顯示的區域，或者說背景是從哪個區域開始繪制的(邊框、補白或內容區域)。

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

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

demo:當背景是圖片是background-origin：border-box。與background-clip：border-box。顯示時有區別，如果都是背景顏色，沒有區別，background-origin控制的是背景圖片顯示的區域，不會影響背景顏色

?

?

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;}

　　

發現一個小問題：

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

修改上面的代碼：

.clip{background-position: center center;}

　　效果圖

?

轉載于:https://www.cnblogs.com/xiaofenguo/p/6074863.html

總結

以上是生活随笔為你收集整理的background-clip与background-origin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。