众所周知，background-position是用来容器背景图片定位的，我们现在需要把一个背景图片定位到距底部10px，右边20px的地方。嗯，咋一看很简单是吧。我们只要设置background-postition相关的top，left的方位值，就可以实现了。
嗯。。。，等等，好像是有问题的，我们都知道top和left是距离容器上边和左边的距离对吧！但是我们的需求是距离底部和右边的距离，有些时候图片的大小是可变的，容器的大小也是可变的，那就很复杂了，你需要慢慢的去尝试。这是一种痛苦的体验。
上面那种痛苦的方法我是不会使用的，我们来看看怎样优雅的解决。
1.使用background-position的扩展语法，它允许我们指定背景图片距离任意角度的位置，只要我们在偏移量前面指定关键字：
看看效果：
当然，好东西就是会存在兼容问题，我们在不支持background-position扩展语法的浏览器中需要提供一个合适的回退方案。
代码截图如下：
在设置背景图片距离某个角的偏移量的时候，经常会遇到偏移量与容器的内边距保持一致的场景，我们继续采用上面background-position的扩展语法方案，可以写出一下代码完成需求：
是的，可以实现：
我们实现了与内边距保持一致，但是还不够好，这个代码不够DRY，一旦我们的padding发生改变，那么我们的代码就要修改三处地方
只要padding改变，红色三个箭头的地方都要发生改变，才能保持我们的需求。针对这个问题，我们使用background-origin来解决。
在使用之前，我们先来了解一下，background-position中的top和left到底是相对于哪个左上角？
我们知道，每个元素都存在三个矩形框border-box,padding-box ,content-box。
默认情况下，background-position是以padding-box为基准的，这个也是为什么边框不会遮住背景图片的原因。这些值是background-origin中可以枚举的，我们现在修改默认值，改成border-box看看有什么效果？
看看效果：
很明显，边框遮住了背景图片。
有了上面的尝试，我们可以写出在代码修改的很少的情况下，使得背景图片和内边距保持一致。
效果如下：
修改padding为100px
现在只需要修改padding就能完全保持一致。（background-origin 属性规定 background-position 属性相对于什么位置来定位。）