困惑在哪里？

background-clip 與 background-origin是css3中引入的兩個跟元素背景相關(guān)的屬性，它們有相同的可選值，即border、padding、content三種，而且這兩個屬性表示的都是元素背景與元素邊框、補白(padding)和內(nèi)容區(qū)域之間的某種關(guān)系。

比如，我們想要在邊框上顯示背景，我們可以使用background-origin幫我們實現(xiàn)（前提是邊框要是透明的，不然它會覆蓋住背景）

這里為了既體現(xiàn)出邊框，又體現(xiàn)出邊框中的背景，我特意使用了虛線的邊框。(我是在chrome上做的demo,所以css3屬性只使用了webkit前綴)

運行效果如下：

我們看到黑色部分是虛線的邊框（因為邊寬寬度很大，所以虛線看起來怪怪的），虛的地方正好露出了背景。

所以使用background-origin能夠把背景顯示的邊框上。那background-clip又是做什么滴捏？

很多書上或文章上的解釋是background-clip是用來控制背景的顯示范圍的，那么是不是background-clip也可以讓背景顯示在邊框上呢？那就試試咯

還是用上面的代碼，不過這回是把里面的background-origin改為background-clip

然后看下運行結(jié)果：

我們看到背景并沒有在邊框上顯示，看來background-clip并沒有這個功能。那這貨到底有什么用呢？

元芳，關(guān)于background-clip與background-origin這兩個東西，你怎么看？

大人，經(jīng)過明察暗訪，卑職已經(jīng)摸清了這二人的底細，容卑職慢慢道來。

首先來看background-clip, mozilla官網(wǎng)上的解釋是：

這解釋還是很讓人蛋疼，義譯過來大概就是規(guī)定背景圖片或顏色是否能在邊框下顯示。但前面已經(jīng)說了，把background-clip設(shè)為border是沒任何效果的。事實上，background-clip的默認值就是border

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

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

這回還是不看什么官網(wǎng)啊手冊啊什么的了，我直接說說我的理解。

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

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

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

但屌絲終有逆襲日，木耳再無回粉時，當(dāng)變成黑木耳女神再來投懷送抱時，屌絲也完全可以說一聲：不！

所以當(dāng)background-origin的值為border，而background-clip的值為padding時，雖然背景是從邊框區(qū)域開始繪制的，但因為設(shè)定了邊框不顯示背景，所以本來屬于邊框的那一部分背景就不會顯示出來，就好像背景圖片被裁剪了一部分一樣?？聪麓a：

效果如下：

最后總結(jié)一下

background-clip：border|padding|content

該屬性指定了背景在哪些區(qū)域可以顯示，但與背景開始繪制的位置無關(guān)，背景的繪制的位置可以出現(xiàn)在不顯示背景的區(qū)域，這時就相當(dāng)于背景圖片被不顯示背景的區(qū)域裁剪了一部分一樣。

background-origin：padding|border|content

該屬性指定了背景從哪個區(qū)域(邊框、補白或內(nèi)容)開始繪制,但也僅僅能控制背景開始繪制的位置，你可以用這個屬性在邊框上繪制背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了

最新評論