背景与边框--灵活的背景定位

灵活的背景定位

在CSS2.1中，如果想针对容器某个角对背景图片做偏移定位，如右下角，就只能指定距离左上角的偏移量，或者完全靠齐到其他三个角。但通常会在图片和容器的边角之间能留出一定的空隙（类似内边距效果），避免产生如下效果：

Code Pirate

CSS2.1对于尺寸固定的容器可以做到这一点，但很麻烦:可以基于它自身尺寸以及期望它距离右下角的偏移量，计算出背景图片距离左上角的偏移量，然后再把计算结果设置给background-position，但当容器元素尺寸不固定时（因为内容往往可变），这就不可能做到了。

通常只能把background-position设置为某个接近100%的百分比值，以便近似地得到想要的效果。

background-position的扩展语法方案

CSS3中background-position属性允许指定背景图片距离任意角的偏移量，只要在偏移量前面指定关键字。

如让背景图片跟右边缘保持20px偏移量，同时跟底边保持10px偏移量：

background: url(code-pirate.svg) no-repeat #58a;
backgruond-position: right 20px bottom 10px;

Code Pirate

还需要提供一个合适的回退方案（在不支持background-position的浏览器中背景图片会贴在左上角），而且会干扰到文字可读性，回退方案是把老套的bottom right写进background的简写属性中：

background: url(code-pirate.svg) no-repeat bottom right #58a;
backgruond-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;

Code Pirate

但代码不够简洁，每次改动内边距值时，需要更新三个地方的值，所以可以使用另一个更简单的办法：让它自动地跟着我们设定的内边距走，不用另外声明偏移量的值。

background-position: top left;中top left到底是哪个盒子的左上角？

因为每个元素身上都有3个矩形框，
border box（边框的外沿框），padding box（内边距的外沿框）和content box（内容区的外沿框）。默认情况下，background-position以padding-box为准，这样边框才不会遮住背景图片，因此 top left默认指padding box的左上角。在CSS3中我们可以通过background-origin来改变选中的盒子，比如改为content-box，在background-position属性中使用边角关键字时将会以内容区的边缘作为基准。

更简洁的写法：

padding: 10px;
background: url(code-pirate.svg) no-repeat #58a
            bottom right; /* 或 100% 100% */
background-origin: content-box;

Code Pirate

有必要时可以将这两种技巧（background-origin和background-position）组合使用，如果想让偏移量与内边距稍稍有些不同（比如稍微收敛或超出），那么可以在使用background-origin: content box的同时，再通过background-position来设置额外偏移量。

calc()方案

实现初始问题：将背景图片定位到距离底边10px且距离右边20px的位置

单以左上角偏移思路考虑，就是希望它有一个100% - 20px的水平偏移量，以及一个100% - 10px的垂直偏移量

calc()支持此类运算，可以完美在backgroud-position中使用：

background: url(code-pirate.svg) no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 10px);

Code Pirate

注意： calc()函数内部的 "-" 和 "+" 运算符的两侧各需要一个空白符，否则会产生解析错误。未来calc()内部可能允许使用关键字，而关键字可能包含连字符(即-号)