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

 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的区别

标签：

原文地址：http://www.cnblogs.com/zhangjiehui/p/4250887.html