CSS揭秘:背景与边框（3）~灵活的背景定位

灵活的背景定位

难题

如果想要针对容器某个角对背景图片做偏移定位。如右下角，在CSS2.1中，我们只能指定距离左上角的偏移量，或者直接完全靠齐到其他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果），以免得到如图效果：

对于具有固定尺寸的容器来说，使用CSS2.1来做到这一点事可能的，但很麻烦，基于它自身的尺寸以及我们期望它距离右下角的偏移量，计算出背景图片距离左上角的偏移量，然后再把计算结果设置给background-position。当容器元素的尺寸不固定时（因为内容往往是可变的），这就不可能做到了。网页开发者通常只能把background-position设置为某个接近100%的百分比值，以便近似的得到想要的效果。 但是，借助现代的CSS特性，我们已经拥有了更好的解决方案！

background-position的扩展语法方案

在CSS背景与边框中，background-position属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边缘保持20px的偏移量，同时与底部保持10px的偏移量，结果如图所示:

background: url(img/1.jpg) no-repeat #58a;
background-position: bottom 10px right 20px; 

之后需要注意的就是，我们还需要提供一个合适的回退方案。因为对上述方案来说，在不支持background-position扩展语法的浏览器中，背景图片会紧贴在左上角（背景图片的默认位置）。这会看起来很奇怪，而且它会干扰到文字的可读性（参见下图）。

提供一个回退方案也很简单，就是把老套的bottom right定位值写进background的简写属性中：

background: url(img/1.jpg) no-repeat bottom right #58a;
background-position: bottom 10px right 20px; 

background-origin方案

在为背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量与容器内边距一致。如果采用上面的background-position的扩展方案，代码看起来是这样的：

padding: 10px;
background: url(img/1.jpg) no-repeat #58a;
background-position: bottom 10px right 10px;

	我们会得到的结果是：背景图片与底部和右边缘分别有10px的偏移量，说明它起作用了，但是代码不够**DRY**：每次改动内边距时，我们都需要在三个地方更新这个值！还好，还有一个更简单的办法实现这个需求：让他自动的跟着我们设定的内边距走，不用另外声明偏移量的值。

	在网页开发生涯中，你很可能多次写过类似background-position：top left；这样的代码，你是否曾经有过疑惑：这个top left 到底是哪个左上角？你可能知道，每个元素身上都存在三个矩形框（如图）：border box （边框的外沿框）、padding box（内边距的外沿框）和content box（内容区的外沿框）。那background-position这个属性指定的到底是哪个矩形框的左上角？
	默认情况下，background-position是以“padding box”为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是padding box的左上角。不过，在 背景与边框中，我们得到一个全新的属性background-origin，可以用它来改变这种行为，在默认情况下，它的值是 padding-box。如果把它的值改成content-box，我们在background-position属性中使用的边角关键字将会以内容区的边缘座位基准（也就是说，此时背景图片距离边角的偏移量就跟内边距保持一致了）：

padding: 10px;
background: url(img/1.jpg) no-repeat bottom right #58a;
background-origin: content-box;		

这个的视觉效果和上面那个一致，但是我们的代码变得更加DRY了，另外还要记得，在必要的时候可以把这两种技巧组合起来！如果你想让偏移量与内边距稍稍有些不同（比如稍微收敛或超出），那么可以在使用background-origin：content-box的同时，在通过background-position的扩展语法来设置这些额外的偏移量。

calc（）方案

本文上述第一个解决方案中提到：把背景图片定位到距离底边10px且距离右边缘20px的位置。如果我们仍然以左上角偏移的思路来考虑，其实就是希望它有一个100% -20px的水平偏移量，以及100% -10px的垂直偏移量。谢天谢地，calc（）函数允许我们执行此类运算，它可以完美的在background-position中使用：

background: url(img/1.jpg) no-repeat ;
background-position:calc(100% -20px) calc(100% -10px);

DRY是Don’t Repeat Yourself的首字母缩写，意思是不应该重复你已经做过的事情。它是一种广为流传的编程理念，旨在提升代码的可维护性：在改变某个参数是，做到只改尽量少的地方，最好是一处。强调CSS代码的DRY原则是一个贯穿本书（《CSS揭秘》）的主题。DRY的反面是WET，它的意思是We Enjoy Typing（我们喜欢敲键盘）或Write Eeverything Twice（同样的代码写两次）。