《CSS揭秘》灵活的背景定位 background-position

难题

很多时候我们想针对容器的某个角对背景图片进行偏移定位，在css2.1中，我们只能指定对于左上角的偏移量，或者完全靠齐到其他三个角。如图，我们对背景图片设置 background-position：bottom right

效果展示：

因为图片跟容器的边缘之间没有空隙，不会在审美上产生非常舒服的效果。对于具有固定尺寸的容器来说，使用css 2.1来做到这一点是可能的，但是很麻烦，需要自己计算出基于自身尺寸以及我们期待他距离右下角的偏移量，计算出背景图片距离左上角的偏移量。借助现在的css特性我们有了更好的解决方案！

background-position 的扩展语法方案

background-positon属性已经得到扩展，允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。如果我们想要让背景图片跟右边缘保持20px的偏移量，同时跟底边保持10px的偏移量，我们可以这样做：

效果展示：

代码展示：

css

div {
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
    background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;
    /*上面bottom right 为回退方案，避免不支持css3新特性默认图片位置为左上角而遮挡文字*/
    background-position: right 20px bottom 10px;
    /* css 2.1 中 background-position只能设置 距离“左上角”的偏移量
       css3 则允许设置对于任意角的偏移量 right 20px bottom 10px 距右边缘20px 下边缘10px */
  }

html

 <div>Code Pirate</div>

background-origin方案

在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量与容器内边距一致。
我们可根据上面的background-positon的扩展语法方案代码如下：

效果展示：

代码展示：

div{
padding:10px;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
}

如你所见，它起作用了，但是代码不够DRY（消除重复），每次我们改动内边距的值时，我们需要在三个地方更新这个值！于是我们可利用background-origin更简单的实现我们的需求。
代码展示:

div {
 /* 若偏移量与容器内边距保持一致 */
 background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;
 /* background-position 默认是以padding-box为准的 可以利用background-origin设置改变基准  */
 background-origin: content-box;
 /*background-origin: padding-box|border-box|content-box;
	 padding-box	背景图像相对于内边距框来定位。	
	 border-box	    背景图像相对于边框盒来定位。
 	 content-box	背景图像相对于内容框来定位。 */
  }

**默认情况下，background-origin 是以 padding-box 为准的，这样边框才不会遮住背景图片。**我们可以将值设置为content-box这样background-position 属性中使用的边角关键字将会以内容区的边缘为基准，也就满足了我们的需求。

Calc() 方案

如果我们仍然 以左上角偏移的思路来完成背景图片的定位，其实就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直偏移量。谢天谢地，calc() 函数允许我们执行此类运算，他可以完美地在 background-position属性中使用。

效果展示：

代码展示：

div{
  background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat calc(100% - 20px)  calc(100% - 10px) #58a;
 }

calc()函数内部的-和 + 两边需要各加一个空格 ，否则会产生解析错误！这个规则是为了向前兼容，calc()函数允许使用关键字，而这些关键字内部可能含有连字符（减号）。