很多时候，我们想针对容器某个角对背景图片做偏移定位，如右下角。在 CSS 2.1 中，我们只能指定距离左上角的偏移量，或者干脆完全靠齐到其他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果），以免得到像下图这样的效果。 
background-position: bottom right; 通常不会产生在审美上让人非常舒服的结果，因为图片跟容器的边缘之间没有空隙
对于具有固定尺寸的容器来说，使用 CSS 2.1 来做到这一点是可能的，但很麻烦：可以基于它自身的尺寸以及我们期望它距离右下角的偏移量，计算出背景图片距离左上角的偏移量，然后再把计算结果设置给 background-position。当容器元素的尺寸不固定时（因为内容往往是可变的），这就不可能做到了。网页开发者通常只能把 background-position 设置为某个接近 100% 的百分比值，以便近似地得到想要的效果。如你所愿，借助现代的CSS 特性，我们已经拥有了更好的解决方案！
background-position 的扩展语法方案
在 CSS 背景与边框（第三版）（http://w3.org/TR/css3-background）中，background-position 属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边缘保持 20px 的偏移量，同时跟底边保持 10px 的偏移量，可以这样做（结果如图所示）： 
我们可以指定距离其他各边的偏移量；为了更清楚地看到偏移是怎么工作的，背景图片的外圈加了一层虚线框
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
最后一步，我们还需要提供一个合适的回退方案。因为对上述方案来说，在不支持 background-position 扩展语法的浏览器中，背景图片会紧贴在左上角（背景图片的默认位置）。这看起来会很奇怪，而且它会干扰到文字的可读性（参见下图）。提供一个回退方案也很简单，就是把老套的bottom right 定位值写进 background 的简写属性中： 
如果我们不希望旧版浏览器的用户看到这个结果，还需要指定一个回退方案
background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
background-origin 方案
在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量与容器的内边距一致。如果采用上面提到的 background-position 的扩展语法方案，代码看起来会是这样的：
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
我们可以在下图中看到结果。如你所见，它起作用了，但代码不够DRY：每次改动内边距的值时，我们都需要在三个地方更新这个值！谢天谢地，还有一个更简单的办法可以实现这个需求：让它自动地跟着我们设定的内边距走，不用另外声明偏移量的值。 
对背景图片应用的偏移量往往跟内边距的值正好一致
在网页开发生涯中，你很可能多次写过类似 background-position:top left; 这样的代码。你是否曾经有过疑惑：这个 top left 到底是哪个左上角？你可能知道，每个元素身上都存在三个矩形框（参见下图）：border box（边框的外沿框）、padding box（内边距的外沿框）和 content box（内容区的外沿框）。那 background-position 这个属性指定的到底是哪个矩形框的左上角？默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是 padding box 的左上角。不过，在背景与边框（第三版）（http://w3.org/TR/css3-background）中，我们得到了一个新的属性 background-origin，可以用它来改变这种行为。 
在默认情况下，它的值是（闭着眼睛也猜得到）padding-box。如果把它的值改成 content-box（参见下面的代码），我们在 background-position 属性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景图片距离边角的偏移量就跟内边距保持一致了）：
padding: 10px;
background: url(“code-pirate.svg”) no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;
它的视觉效果跟图 4 是完全一样的，但我们的代码变得更加 DRY了。另外别忘了，在必要时可以把这两种技巧组合起来！如果你想让偏移量与内边距稍稍有些不同（比如稍微收敛或超出），那么可以在使用background-origin: content-box 的同时，再通过 background-position的扩展语法来设置这些额外的偏移量。
calc() 方案
让我们回顾一下本节开头的挑战：把背景图片定位到距离底边 10px 且距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑，其实就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直偏移量。谢天谢地，calc() 函数允许我们执行此类运算，它可以完美地在background-position 属性中使用：
background: url(“code-pirate.svg”) no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
相关阅读
CSS 背景与边框 http://w3.org/TR/css-backgrounds CSS 值与单位 http://w3.org/TR/css-values
