[css 揭秘]：CSS揭秘 技巧（三）：背景定位

我的github地址：https://github.com/FannieGirl/ifannie

源码都在这上面哦！

喜欢的给我一个星吧

背景定位

问题：很多时候，我们想针对容器某个角对背景图片做便宜定位。
个人觉得，背景定位应用还是很广的，在实践中经常遇到。在实践中才会发现它的美，真是强大。

background-position的扩展语法方案

在css背景与边框中，background-position属性已经得到了扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。

例如：

效果演示地址：https://jsfiddle.net/Fannie/06sjmL6n/7/

上述方案在不支持background-position扩展语法的浏览器中，背景图片会紧贴在左上角，这看起来很奇怪啊！，如是想到一个回退的方案，就是把bottom right 定位值写进background的简写属性中。

background-origin 方案

有一种情况：偏移量与容器的内边距一致。如果用上述的方案，代码可能是这样的

效果是出现了，但是不够好，不容易维护（每次更改内边距的时候，需要改动三个值）。可能你就会想，让它自动跟着我们设计的内边距走，不用另外的声明偏移量的值

小知识点：每个元素都有三个矩形框，border Box | padding Box | content Box

在默认情况下，background-position 是以padding box 为准的。这样边框才不会遮住背景图片，因此 top left 默认是值padding box 的左上角。然而用background-origin 可以改变这种行为。如果我们把它的值改成 ceontent box ,我们在background-position 属性使用边角关键字将以内容区作为基准。就可以达到我们想要的效果

例如：

演示地址：https://jsfiddle.net/Fannie/06sjmL6n/8/

在必要的时候，其实这两种技巧组合起来，效果更加DIY了。

calc 方案

先get一下这个calc函数（我相信 很多人对它还是不那么熟悉的）
推荐看一篇博客，你就知道calc这个函数了：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

知识点：请不要忘记在calc函数内部的 - 和 + 运算符两侧加上一个空白符，否则解析错误哦

然后，我们回归我们的问题：把背景图片定位到距离底边 10px 且距离右边 20px 的位置。
其实我们是不是希望它有一个 100% - 20px 的水平偏移量 以及 100% - 10px 的垂直偏移量。

例如：

演示地址：https://jsfiddle.net/Fannie/06sjmL6n/9/

calc 的web 段浏览器的支持还可以，但是移动端的支持不是很好哦！需要写兼容。

后言：
如果你对基础的知识点已经很熟悉，你可以自动跳过。写上去的原因是查漏补缺，巩固一下基础。
如果有不对的地方，欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school；
参考链接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp