點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

說到background，所有搞前端的人都非常非常熟悉，因為我們天天都要用到它呀， 眯著眼睛，我們也能背下那個幾個常用的屬性取值，如下：

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

6. background-size

在css3中有兩個屬性加了進來。它們是

• background-clip

• background-origin

對於這兩個屬性的使用，我來簡單總結一下：

一、backgroundClip

它有三個取值，如上圖分別是border-box|padding-box|content-box。

它們的作用就是背景分別被裁邊框，邊距，內容框。看個DEMO

從上到下分別是content-box，padding-box，border-box。這樣就很清楚了。

二、backgroundOrigin

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。

通一個demo來更清楚的了解和記住它的作用

從上到下分別是border-box，content-box，padding-box。

總結一下：

1、background可以簡寫：

• [background-color]

• [background-image]

• [background-repeat]

• [background-attachment]

• [background-position] /

• [ background-size]

• [background-origin]

• [background-clip]

2、注意一下兩個屬性的兼容性：

兩個情況一樣，都還是比較好的。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！