background-clip和background-origin区别

background-clip和background-origin

两个都是Css3的属性，用得不多，有时候会混淆，特地比较了下两个属性的区别。

w3cSchool有明确的定义：

属性	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3

两个的属性值都是一样的

值	描述	测试
border-box	背景被裁剪/定位到边框盒。	测试
padding-box	背景被裁剪/定位到内边距框。	测试
content-box	背景被裁剪/定位到内容框。	测试

background-clip,绘制我觉得换成裁剪会更加好理解，我们从图来比较解释下两个属性的区别。

background-origin: border-box;

background-clip: padding-box;

背景图像从边框线开始，从padding开始裁剪。

1. background-origin: border-box
2. background-clip: padding-box;

1. background-origin: border-box;
2. background-clip: content-box;

从content-box开始裁剪,很明显，可以看到content-box显示的是背景图片的一部分

1. 1. background-origin: content-box;
   2. background-clip: content-box;
   3. 
      
   4. 可以看出图片被挪到了content-box的左上角

从以上几个例子可以看出来background-origin决定的是背景图片开始绘制的定位。

background-clip决定的是背景图片被剪切出来显示的部分。

1.