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是用来决定图片的原始起始位置，即你可以选择背景图片是从内容区域开始显示，还是内边距，还是边框。

 1 .border  2 {  3 background:url(resource/20131113040150849.jpg);  4 background-repeat:no-repeat;  5 background-position:left top;  6 border-width:30px;  7 border-style:dashed;  8 border-color:red;  9 width:200px; 10 height:300px; 11 padding:30px; 12 margin:0 auto; 13 } 

View Code

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

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

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

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

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

 1 .border  2 {  3 background:url(resource/20131113040150849.jpg);  4 background-repeat:no-repeat;  5 background-position:left top;  6 border-width:30px;  7 border-style:dashed;  8 border-color:red;  9 width:200px; 10 height:300px; 11 padding:30px; 12 margin:0 auto; 13 background-origin:border;14 -moz-background-origin:border;15 -ms-background-origin:border;16 -o-background-origin:border;17 -webkit-background-origin:border;18 background-clip:content-box;19 } 

View Code

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

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

background-origin和background-clip的区别