[CSS揭秘]灵活的背景定位

技巧：可以随意的摆放背景图片的位置

背景知识：在CSS2.1时代，我们只能通过background-position设置图片相对于容器左上角的偏移量，这样当容器的尺寸不固定时，只能近视使用百分比实现。那么在CSS3时代，我们有了更好的解决方案。

CSS3时代，background-position属性得到了扩展，允许我们指定背景图片距离任意角的偏移量，只需要在偏移量前面指定方位关键字即可。

对于每一个被设定的背景图片来说，background-position指定背景图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来计算的。

取值包括：绝对值或相对值，可以设置在盒模型外面，所以可以取负值。

具体包括：百分数percentage, length长度，关键字

top left/left top	top/top center/center top	top right/right top
left/left center/center left	center/center center	right/right center/center right
bottom left/left bottom	bottom/bottom center/center bottom	bottom right/right bottom

如果只有一个值被指定，那么这个值会默认设置背景图片位置中的水平方向，同时垂直方向默认设置为50%

 

background-position设置的偏移量，默认情况下是相对于padding-box这个矩形区域来计算的。如果我们的padding和偏移量刚好一致时，是否有可能调整这个偏移量的相对目标，从而使得代码更简洁呢？答案是肯定的，那就是CSS3时代的background-origin属性。

background-origin规定了指定背景图片background-image属性的原点位置的背景相对区域（在background-attachment==fixed时失效）

默认值是padding-box, 没有继承性，不适用于CSS动画，取值范围： border-box; padding-box; content-box;

 

padding: 10px;

background: url("image.jpg") no-repeat #58a bottom right;

background-origin: content-box; //相对于content-box来计算背景图片的偏移量

 

参考案例地址：

play.csssecrets.io/extended-bg-position