background-origin和background-clip的理解

  第二遍再次學習到css樣式的部分，在背景設置部分遇到了問題。最讓我困惑的就是background-origin和background-clip這兩個屬性。    

    官方解釋

        background-origin:規定背景圖片的定位區域。      

        background-origin:規定背景圖片的定位區域。      

        background-clip:規定背景圖片的繪製區域。     

        經過官方的定義，咱們發現這兩個屬性它們有相同的可選值，即border、padding、content三種，並且這兩個屬性表示的都是元素背景與元素邊框、補白(padding)和內容區域之間的某種關係。    

        此時仍是讓人感到困惑，迷惑他們的使用方法，因此在這裏看到了網上的一位大神用一個實例來解釋說明他們兩個    

    總結:（引用了上述文章中的內容）

    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,則背景在元素的邊框、補白和內容區域都會顯示；若是值爲padding,則背景只會在補白和內容區域顯示；若是值爲content，則背景只會在內容區域顯示。