background-origin和background-clip的区别

background-origin和background-clip是CSS3内新增加的属性，其实一个是对背景图片的放置，另一个是对背景图片的剪裁。

background-origin和background-clip的选择都一样：content- box,padding-box,border-box(要注意在火狐和Chrome和Safari中，需要使用私有属性，加上-mox-和 -webkit-）

在区别之前，先说明：

这是常见的盒子模型，content、padding、border、margin外围的边线在图中被标识出来，他们在区别3项选择（content- box,padding-box,border-box）中起到了十分重要的作用。

origin的翻译过来时原始的意思。顾名思义，所以background-origin是用来决定图片的原始起始位置，即你可以选择背景图片是从内容区域开始显示，还是内边距，还是边框。

View Code

 

                                 

background-origin:margin          background-origin:padding          background-origin:content

                                 

我们看到，当background-origin的值为content-box时，首先会让背景图片的左上角和内容边缘左上角对齐；padding-box时，则会让背景图片的左上角和内边距的左上角对齐。以此类推。可见background-origin的值的确是决定背景图片开始从哪个区域开始显示。

另外，background-origin默认的起始位置在哪呢？这里就不演示了，但要记住——是padding。

 

接下来介绍background-clip，它的作用为将背景图片做适当的裁剪，以适应需要。当然这里并不是真正意义上的把图片给裁剪了，而是根据属性值。把图片的某些部位做适当的隐蔽。

怎样个剪裁法呢。根据你设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。

View Code

          

经测试，在火狐、chrome、ie9+浏览器均表现为上图。

由此可见，虽然图片是从顶着边框的左上角进行定位，但是裁剪属性background-clip的属性是设置为content-box,所以只有content区域的内容看得见，也就是只要是在content之外的图片内容都被隐蔽掉了。 

如果此篇文章有帮到您，请您帮帮忙动个手指，推荐一下此文吧~谢谢拉~^^