/* 说明 background-origin 属性规定 background-position 属性相对于什么位置来定位,值有: ① padding-box 默认,背景图像相对于内边距框来定位(覆盖padding,贴边框) ② border-box 背景图像相对于边框盒来定位(覆盖border,全部覆盖) ③ content-box 背景图像相对于内容框来定位(覆盖内容,贴内边距内缘)*/
本节开始给出的示范,使用了 ③ content-box 的设定,背景图像相对于内容定位。内容其实说的是内容区域,具体指元素中没有进行特殊定位的子元素(比如图片)和子节点(比如文本)的自然呈现的区域,在这个区域里,子内容按代码流的出现次序进行自然排列,它们会受到宿主元素的内边距设定的影响,如果内边距即padding大于 0px 则前述子元素和文本不会靠边,上下左右都会与元素的边境拉开padding所设定的内边距距离。