技巧：可以随意的摆放背景图片的位置
背景知识：在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