background-origin 是 CSS3 中新增的屬性。在使用 background-position 屬性來設置背景圖像的位置時，默認是以元素左上角的位置來計算的。您還可以使用 background-origin 屬性來設置 background-position 屬性相對哪個位置來定位背景圖像，background-origin 屬性的可選值如下：
【示例】使用 background-origin 屬性設置背景圖像相對于元素的邊框區域來定位：
運行結果如下圖所示：
background-clip 是 CSS3 中新增的屬性，通過它可以設置背景圖像的顯示區域。background-clip 屬性的可選值如下：
【示例】通過 background-clip 屬性設置背景圖像僅在元素內容區域顯示：
運行結果如下圖所示：
background 是背景屬性的簡寫形式，通過它不僅可以為元素設置某個背景屬性，還可以同時設置多個或者所有的背景屬性。在設置多個背景屬性時并沒有固定的順序，但推薦使用如下順序進行設置：
background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip
在設置多個背景屬性時，有以下幾點需要注意：
每個屬性之間使用空格進行分隔；
如果同時設置 background-position 和 background-size 屬性，這兩個屬性之間需要使用斜線/分隔，并且需要遵循 background-position 屬性在前 background-size 屬性在后的順序；
如果同時設置 background-origin 和 background-clip 屬性，需要遵循 background-origin 屬性在前 background-clip 屬性在后的順序。如果 background-origin 與 background-clip 屬性的值相同，則可以只設置一個值。
【示例】通過 background 同時設置多個背景屬性：
運行結果如下圖所示：
background 屬性還支持設置多組屬性值（比如上面示例中的#ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box就可以看作是一組屬性），每組屬性值之間使用逗號,分隔。但需要注意的是 background-color 屬性不能設置多個，并且只能在最后一組屬性值中設置。
如果設置的多組屬性中，背景圖像之間存在重疊，那么前面設置的背景圖像會覆蓋在后面的背景圖像之上。示例代碼如下：
運行結果如下圖所示：
