对于容器内的背景图做偏移定位，在 CSS 2.1 中，只能指定距离左上角的偏移量，或者完全偏移到其他三个角，但经常是希望图片和边角可以有一定空隙，像下图一样，没有空隙会让视觉感受上就不友好。
如果容易是固定尺寸，在 CSS 2.1 还是可以实现，就是计算距离左上角的偏移量。但是当容器尺寸不固定，这就无法去做到了。通常就只能把 background-position 设置为某个接近 100% 的百分比值，得到近似地效果。再有就是使用伪类去用绝对定位去实现，这样都是不够 DRY。
background-position 的扩展语法方案
在新的 CSS 特性，已经允许指定背景图片距离任意角的偏移量，只需要在偏移量前面指定关键字。
background: url(bushu.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
如果需要回退方案，可以把老套的 bottom right 定位值写进 background 的简写中：
background: url(bushu.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
background-origin 方案
在给背景图设置偏移量时，如若偏移量与容器的内边距一致。使用上面的方案：
padding: 10px;
background: url(bushu.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
可以看到，实现没有任何问题，但是代码就不够 DRY，每次改动内边距，都需要同时去改动 background-position 中的距离。更简单的方法就是，让这个距离跟着内边距走，就不用再声明偏移量的值。
都知道每个元素都有 border box，padding box，content box 三个矩形框，background-position 这个属性默认情况是以 padding box 为准的，这样边框不会遮住背景图片。
在新的 CSS 中多了一个 background-origin 这个属性，可以用来改变来改变这种行为，当然默认值也就是 padding-box，如果改为 content-box，就可以实现上述一样的效果：
padding: 10px;
background: url(bushu.svg) no-repeat #58a bottom right;
background-origin: content-box;
这样代码就变得更 DRY，只需改变 padding 一个地方即可。
上面的两种方法也可以组合起来，可以在 background-origin 设置为 content-box 的同时，再设置 background-position，就可以让偏移量与内边距稍稍有些不同。
calc() 方案
因为多了 calc() 函数可以进行长度计算，我们也可以就用 background-position 设置左上角的偏移量来实现效果：
background: url(bushu.svg) no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 10px);
ps：需要注意 calc() 函数的写法，内部的 - 和 + 运算符的两侧是要各加一个空白符，否则会产生解析错误。这个规则是为了向前兼容，在以后，calc() 内部可能会允许使用关键字，而这些关键字就可能包含连字符（即减号）。
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！ 欢迎大家来聊，有意向可发送简历到 chen_zhen@dahuatech.com，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。
