有一点要十分的注意：如果背景不是no-repeat的话，这个属性是无效的。它会从border-box区域开始显示，这一点很重要。
background-origin属性就先介绍到这里。应该不难吧。下面继续介绍background-clip。之所以没有把这两个属性分为两节分别介绍，因为实战的经验告诉我这两个属性应该是相互搭配才能相得益彰。
clip原意为裁剪，截取。同样顾名思义，background-origin的作用为将背景图片做适当的裁剪，以适应需要。当然这里并不是真正意义上的把图片给裁剪了，而是根据属性值。把图片的某些部位做适当的隐蔽。background-clip与origin的可选择一样，也是有content- box,padding-box,border-box(要注意在火狐和Chrome和Safari中，需要使用私有属性，加上-mox-和 -webkit-,这里就不赘述了，参考解释background-clip的内容)。怎样个剪裁法呢。根据你设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。举个具体例子，图片起始位置和上面的例子一样，比如是从border-box开始，但我background-clip设置的值是content-box，在content之外，也就是border-box内，padding-box内的图片内容统统不可见。尽管你是让图片从边框开始显示。实例如下
.border
{
background:url(“images/qwqw_s.jpg”) black;
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
background-clip: content-box;
background-origin: border-box;
-moz-background-clip: content;
-moz-background-origin: border;
-webkit-background-clip: content;
-webkit-background-origin: border;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}
正如以上所说，我们可以看见虽然图片是从顶着边框的左上角进行定位，但是裁剪属性background-clip的属性是设置为content-box,所以只有content区域的内容看得见，也就是只要是在content之外的图片内容都被隐蔽掉了。
我之所以要在不同浏览器下进行测试(
Firefox/3.6.3，Google：7.0.517.24，
Opera/9.80,
Safari：5.0.1)，答案也在图上，我们看到在火狐下的结果和其他浏览器结果竟然不一样。明明background-clip设置的属性是content-box，但却没有图片的任何部位被屏蔽。我想说的是：在火狐下-moz-background-clip属性是没有content这一值的(但是padding和border还是有的)，在firebug中可以看到，-moz-background-clip的值直接是border，当你强行改为content时，这条属性会直接从bug中消失。当然这只是在 3.6.3版本下的结果，至于在4.0版本中表现如何(虽然只是beta版)。可以自行测试
四．实战
