很多时候，我们想针对容器某个角对背景图片做偏移定位，如右下角。在 CSS 2.1 中，我们只能指定距离左上角的偏移量，或者干脆完全靠齐到其他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果）
对于具有固定尺寸的容器来说，使用 CSS 2.1 来做到这一点是可能的，但很麻烦：可以基于它自身的尺寸以及我们期望它距离右下角的偏移量，计算出背景图片距离左上角的偏移量，然后再把计算结果设置给 background-position。当容器元素尺寸不固定时（因为内容往往是可变的），这就不可能做到了。开发者通常只能把 background-position 设置为某个接近 100% 的百分比值
所以我们的挑战是，把背景图片定位到距离底边 10px 且距离右边 20px 的位置
在 CSS3 中，background-position 属性已经得到扩展，它允许我们指定背景图片 距离任意角的偏移量，只要我们 在偏移量前面指定关键字
在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量和容器的内边距一致。如果采用上面提到的 background-position 的扩展语法方案，代码如下：
代码不够优雅，如需改动需要在三个地方更新值
还有一个更简单的方法可以实现这个需求，让它自动跟着我们设定的内边距走，不需要另外声明偏移的量
默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是 padding box 的左上角。background-origin 默认取值 padding-box，还可以取值 content-box，border-box
如果我们仍然 以左上角偏移的思路 来考虑，其实就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直偏移量。calc() 可以做到这点（其实这里 calc() 为啥这样能实现效果我不是很清楚，为啥 background-position: calc(100%) calc(100%) 背景图就能去右下角了？）