background-origin与background-clip详解与区别

background-origin：背景起源

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制，但也仅仅能控制背景开始绘制的位置，可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了。

共有三个属性值：

border-box：（默认值）背景相对于边框进行定位；以边框左上角为起点渲染(效果图如下)

padding-box：背景相对于padding定位；也可认为从边框内部左上角开始渲染（如下图）padding为50px

content-box：背景相对于内容盒定位；

background-clip：背景裁剪

该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
共有三个属性值：
border-box：从边框开始显示（默认值）

这里注意：因为背景图片默认是从border内部开始渲染，如果单独设置一个background-clip:border-box;是看不出效果的，需要把背景位置改变background-position:-50px -50px;（效果如下图）

padding-box:从内边距开始显示（默认值）

content-box: 从内容区域开始显示；padding为50px

以上~