Question

有一种很常见的设计需求，就是制作一个顶部和底部使用不同背景图片的页面。或者也可能是要求页面内的某个内容模块的顶部和底部使用不同的背景图片。这个需求看起来很简单，使用CSS可以轻松地做出这种效果。但是使用CSS 2.1来制作这种效果往往需要额外的标签。例如，在使用CSS3之前，我解决该问题的一贯方法如下：

你会看到整个内容区域（也就是id为container的div）被包裹在一个类名为footerBackground的div中。有了这样的代码结构，我们就可以先给body设定一个CSS规则，用来设置页面顶部的背景图片：

然后再给footerBackground设定CSS规则。此处用来放置页面底部的背景图片：

这种方法非常好用且基本兼容所有浏览器。但是我一向不赞成仅为解决表现问题而增加额外的标签。

幸好有了CSS3，我们可以轻松解决这个问题了。因为CSS3允许为一个元素设定多重背景（多重背景是CSS3背景和边框模块的一部分）。除了IE 8及更低版本外，其他浏览器均支持该特性。语法如下：

和多重阴影的排列顺序一样，排在最前面的图片在浏览器中显示时会覆盖在最上面。你还可以在声明中追加背景颜色，像下面这样：

将颜色定义在最后，这样背景色就会显示在所有背景图片的下面。

不支持多重背景规则的浏览器（如IE 8及更低版本）会直接忽略整条规则。所以你可以在CSS多重背景规则之前再添加一条普通背景规则来作为针对老版本浏览器的备用方案。

使用多重背景图片时，如果你使用了透明的PNG图片，那透过任何叠放在其他图片之上的透明图片都可以看到下面的图片。但是背景图片不一定非要叠放在另一个背景图片之上，图片大小也不用完全一样。

6.7.1　背景图片大小

要设置每个背景图片的大小，使用background-size属性。使用多重背景时，其语法如下：

规则中声明了每张背景图片的大小（先是宽度，再是高度），多组值之间使用逗号分隔，按照背景属性中图片的顺序对应排列。如上面的代码，图片大小值可以使用百分比或像素值，以及如下几个预定义值：

auto：使用图片的原始大小；

cover：按照原始图片的长宽比缩放图片以填充整个元素区域；

contain：按照原始图片的长宽比缩放图片以使其较长的一边适应元素大小。

6.7.2　背景图片位置

另外还可以给不同的背景图片设置不同的位置。我们可以这样做：

上例中的第二张图片没有声明背景位置，因此会使用默认位置top left。

6.7.3　背景属性的缩写语法

可以使用缩写语法将各种背景属性组合起来。但是以我的经验看，这样会产生捉摸不定的结果。所以我更倾向于使用普通写法，先声明多重背景图片，然后声明背景大小，最后声明背景位置。

W3C有关多重背景的文档，请参阅此处：http://www.w3.org/TR/css3-background/#layering。W3C有关背景大小的文档，请参阅此处：http://www.w3.org/TR/css3-background/#the-background-size。W3C有关背景位置的文档，请参阅此处：http://www.w3.org/TR/css3-background/#the-background-position。