我想说的是，上面的两个例子总结起来只有两个字：麻烦。背景明明只关一个div的事，结果硬是要n多个不相关的div来辅助完成效果——background-clip,backgrou nd-origin便是我们的救星。要知道CSS3的任何新属性不是W3C人吃饱了撑的没事找事想出来来的，它的出现必然性必定是经过详细验证的且有它必要的价值。相信当您阅读完这一节的内容后，你就会开始学会如何用新技术摆脱那些陈旧繁琐的步有三个属性来就不复杂的效果了。
在开始之前，先做几点说明，请看：
首先我们要引入几个概念(呃，这是我自己翻译的，不知道对不对，可能孤陋寡闻了，请朋友们见谅):内容边缘(content edge),内边距边缘(padding edge),边框边缘(border edge),外边距边缘(margin edge)。为了理解，我们可以把内边距，边框，外边距看成一个环形的容器，并且每个环形容器都只有两条边，一条冲内，一条冲外(内和外也是相对的，好比外边距的外边就是边框的内边)，于是我们把冲外(outer)的那条边称为这个环形的边缘(edge)。当然因为内容区域是“实心”的，所以不存在内外的问题。
origin的翻译过来时原始的意思。顾名思义，所以background-origin是用来决定图片的原始起始位置。它有三个可选值content-box,padding- box,border-box(background-origin如果写在css中只有Opera浏览器可以识别，如果希望在火狐或者chrome或 Safari中使用，要使用它们浏览器的私有属性-moz-background-origin(Firefox),-webkit-background-origin(chrome,safari)，并且对应的值是content,padding,border,省略了-box)，即你可以选择背景图片是从内容区域开始显示，还是内边距，还是边框。
举个例子，我们有一个div，关键在定位它的背景图片，为了让演示的效果更明显，我们让它从左上角开始定位，position:left top并且no-repeat。并且内容区于图片大小一致，边框和内边距都设置为30像素宽。OK,
在没有加入background-origin之前的代码为：
.border
{
background:url(“images/qwqw_s.jpg”);
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}
设置background-origin之后的效果图：
因为是在火狐下做的测试,所以-moz-background-origin代替background-origin,相应的属性所以也去掉了-box
效果和作用已经一目了然了：我们看到，当background-origin的值为content-box时，首先会让背景图片的左上角和内容边缘左上角对齐，padding-box时，则会让背景图片的左上角和内边距的左上角对齐。以此类推。可见background-origin的值的确是决定背景图片开始从哪个区域开始显示。但话说回来，如果我没有设置任何的background-origin属性的话，它默认的起始位置在哪呢？这里就不演示了，但有必要记住——padding。
