background-clip和background-origin区别

background-clip和background-origin

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

w3cSchool有明确的定义：
属性描述CSSbackground-clip规定背景的绘制区域。3background-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. background-origin: content-box;
2. background-clip: content-box;
3. 
   
4. 可以看出图片被挪到了content-box的左上角

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

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

1.