细说一些被人忽略的细节——CSS中的背景

这篇东西算是自己学习过程中的一个积累，如果哪里说得不对，希望大家指出，谢谢^_^

CSS中有许多的属性，而在众多的属性中，背景属性是必不可少的。一个完整的页面，众多的CSS Style，没有背景属性肯定是不美观的。

而就是这个用得最多的属性，你是否对它有较深的了解呢？

今天在这里我只是对它其中的一个细节加以说明。

这几天在看《CSS权威指南》，其中看到了对一个元素各个部分的介绍。一个元素粗略的可分为外边距，边框区，内边距，以及内容区这四个区域。

也许写过CSS样式的人大概都能了解一二。但是你清楚，一个元素的背景是属于哪一个部分么？

在CSS2中，背景的延伸范围是“内容区+内边距”，而在CSS2.1以及还在规范的CSS3中，背景的延伸范围被修正为了“内容区+内边距+边框区”。

这个概念也许很容易被人忽略（或许你注意到了，那恭喜你），至少我在前期的CSS学习中并未注意到这么一个细节。有人可能会说，这么一个细节有什么用呢？

不要急，一口是吃不下胖子的，我们首先要正确的理解这个概念。

在一开始，我其实对这个概念产生了小小的误会：我认为倘若在CSS2.1之后规定背景会延伸到边框区的话，那么倘若给一个已经有了背景的元素增加元素框的宽度，那么背景是否会拉伸或者重复呢？大家可以思考一下这个问题的答案。

实践是检验真理的唯一标准。于是我马上就动手去做了。以下是一个1000px宽度的DIV，拥有一个宽度为1000px的图片的背景



当我将DIV的宽度设为20px的时候，效果如下：



大家可以看到，事实上，背景是没有拉伸的。

可是，这又是为什么呢？其实，这并不是我们的错，而是因为默认状态下，元素的背景是扩展到padding-box的，也就是内边距区域。这样一来，即便我们如何增大元素边框的宽度我们都不能看到效果。于是这里我就介绍一个CSS3中新加入的属性——background-origin属性。这个属性规定的是背景延伸的区域，分别有padding-box（默认）、border-box、content-box三个值可选。在正常情况下，背景的延伸是到内边距区域的，所以在上面的例子中我们看不到背景图片的变化。那么，我们在上面的例子基础上加入background-origin属性并设置为border-box后，效果会如何呢？



很明显，我们可以看到背景发生了变化，那是因为我们将background-origin属性设置为了border-box，那样背景将会延伸到边框区域，所以背景图片在默认情况下会repeat，也就是会重复，导致上图中背景的最右边部分多出一块。

好了，说了那么多，其实只是想说，这么一个属性其实不容我们忽略的。很多时候，我们对元素内的内容进行定位的时候会用到padding属性。但是背景在默认的情况下是延伸到padding区的，这样一来，可能会造成整个背景的不雅观。所以往往很多时候我们被迫去使用margin来掩饰这一个缺点。如今，在CSS3中引入了这么一个属性后，我们可以毫无顾虑地使用padding来实现元素内容的定位了，因为如果你只想把背景显示在内容里，而不显示在留白很大的padding区域，你只需要把background-origin设置为content-box就好了。

好了，说了那么多，很抽象，但是实践才是检验真理的唯一标准不是么？那么大家就去试试吧，也许这个属性能为你省下不少的代码呢。