background-clip与background-origin

规定背景的绘制区域

浏览器支持

IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。

注释：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。

有三个值：

border-box   背景被裁剪到边框盒。　　

padding-box   背景被裁剪到内边距框。

content-box  背景被裁剪到内容框

demo：

.clip{width:400px;margin: 50px auto;background-color: red;padding: 20px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}

border-box

 

padding-box

 

content-box

 

 

其实background-clip的真正作用是决定背景在哪些区域显示。如果它的值为border,则背景在元素的边框、补白和内容区域都会显示；如果值为padding,则背景只会在补白和内容区域显示；如果值为content，则背景只会在内容区域显示。

那为毛前面的background-clip:border不起作用？这就得说说background-origin了

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,这时候边框里是能显示背景的，但问题是背景并不是从边框的左上角开始绘制的，它是从补白区域才开始绘制的，女神背景压根就没想要搭理屌丝边框，你屌丝摆出一个怀抱来迎接女神又有个屁用啊，赶紧细软跑吧。background-origin的默认值是padding,也就是默认从补白区域开始绘制背景。

demo:当背景是图片是background-origin：border-box。与background-clip：border-box。显示时有区别，如果都是背景颜色，没有区别，background-origin控制的是背景图片显示的区域，不会影响背景颜色

 

 

demo：

.clip{width:400px;margin: 50px auto;background-image: url("images/1.jpg");background-repeat: no-repeat;background-position: left top;background-color: red;overflow: hidden;padding: 20px;height:200px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}.origin-content{-webkit-background-origin: content-box;background-origin: content-box;}.origin-border{-webkit-background-origin: border-box;background-origin: border-box;}.origin-padding{-webkit-background-origin: padding-box;background-origin: padding-box;}

　　

发现一个小问题：

当设置背景backgroud-position：center center时，background-origin不起作用，background-clip：border-box可以让背景颜色绘制在边框上（不太明白，希望懂得人可以指教）

修改上面的代码：

 .clip{background-position: center center;}

　　效果图