点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

说到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、注意一下两个属性的兼容性：

两个情况一样，都还是比较好的。