开门见山，简单来说

background-origin定义了background的绘制区域（就是从什么地方开始绘制），三个属性

padding-box 背景图像相对于内边距框来绘制

border-box 背景图像相对于边框盒来绘制

content-box 背景图像相对于内容框来绘制

background-origin有一点要十分的注意：如果背景不是no-repeat的话，这个属性是无效的。它会从border-box区域开始显示，这一点很重要。

background-clip定义了background的显示区域，三个属性

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

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

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

其实属性是一样的，例如：当然如果你也可以定义从border开始绘制，而用background-clip让他不显示。

实例：

如果我们以前要实现一个这样一个例子的话（中间宽度随着文字的增加自适应，而背景是图的话）

需要这么写

 
     
     
      cccccc
     
     

定义三个div，旁边两个div固定，中间的div背景设置repeat-x

css3出来以后，我们可以利用background-clip,background-origin这两个属性这样写

     
      cccccc
     

有兴趣的朋友，可以尝试一下