文章
简介
background-origin
设置或检索对象的背景图像计算background-position时的参考原点(位置)
默认值：padding-box
padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。
background-clip
指定对象的背景图像向外裁剪的区域。
默认值：border-box
padding-box：从padding区域（不含padding）开始向外裁剪背景。
border-box：从border区域（不含border）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
CODE
请使用 chrome，点击右上角的 edit on codepen 可更改测试
background-origin
如果有 background-attachment 是 fixed ，那么 background-origin 不生效，并且这里是相对于 html（root）偏移，测试这一项，把本行的 fixed 的注释去掉，还有把 #demo 和 body 的 margin 置成 0 ，效果明显。详细原因参见：http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
background-clip
结语
如果你不想让背景从边界泄漏，以下代码还是很有用的：
background-clip: padding-box;