CSS之background-origin属性

1.作用：其实background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（background-position的原点）

如果你看过了《CSS3 background-clip》一文，你不难发现，元素Background中的background-color原点位置是在Border的外边缘处，而background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处），下面一起重新看看在《CSS3 background-clip》中所展示的background模型图

2.语法： background-origin: padding-box || border-box || content-box

取值说明：

1.padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片

2.border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片

3.content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片

注意：background-origin虽然现代浏览器都支持，但在不同内核浏览器下还是需要带上其各自的前缀，这样在实际应用中最好按下面的语法规则书写，以保证只要支持background-origin的都能正常运行

3.实例：

先给他们创建一个Demo:

1.background-origin:padding-box

首先来看padding-box的应用，在前面的Demo基础上，给这个Demo加上background-origin:padding-box，具体如下所示

看到效果后有些人一定会问，怎么和当初效果一样，没有任何效果变化呢？细心的你要是仔细看了前面的内容，你一定不会这样问，因为padding-box是background-origin的默认值 ，也就是说background-origin:padding-box就是使background-position的起点在”left top”位置处，也是background-position的默认值。从而也就没有任何的变化

2.background-origin:border-box

现在效果明显变化了，背景图片从刚才的padding外边缘移动到了border的外边缘，其实background-position并没有改变，依旧是left top；但是background-origin把background-position的原点位置改变了，从当初的padding外边缘移动到了border的外边缘。在background-origin属性还没有出现时，做这样的效果，都是通过改变background-position的值，就拿这个例子来说吧，我们边框的20px的大小，那么需要把背景图片从边框的外边缘处开始的话，那只有改变background-position的初始值，也就是变成background-position:-20px -20px;如此一来，background-origin取值为border-box等于把background-position变成了负的边框宽度

3.background-origin:content-box

当background-origin值为content-box时，background-position的起点位置就由当初的padding外边缘移动到现在content的外边缘处了，换句话说，background-position由当初的(left top)位置变成了现在的(20px 20px)，因为这个Demo的padding为20px

总结：background-clip主要是用来控制背景（背景色和背景图片）的显示区域，其主要配合background-origin来制作不同的效果；而background-origin主要是用来控制背景图片的background-position位置，并且其只能控制背景图片