还记得小编前面发布的一些css3绘图教程么？我们通过before和after伪元素为整个页面减少了各种复杂嵌套的标签，从而提升页面的加载速度。
总结下来，我们不难发现，这两个伪元素多半是用于插入文本或者矢量图形，而背景通常是位图图像，如果我们想用多张不同的背景图片来填充同一个元素，那么伪元素是否还适用呢？显然可以，因为伪元素的结构跟普通的元素在结构上并没有太大的区别，只不过仅仅用来直接显示一张图片就未免有点大材小用了。
所以CSS3新增了一个多重背景的功能，其属性仍为background，不同的只是需要用英文逗号分隔多个背景。
现在我们先来准备好两张背景图片，存放到images目录下，名字分别为bg_flower.gif和bg_flower_2.gif。
然后编写基础的html代码
为简便起见，这里我们不做任何的元素，而是直接对body进行操作：
body {
background-image:url(/i/bg_flower.gif), url(/i/bg_flower_2.gif);
}
运行效果如下图所示
大家可能会觉得这样没什么意义，提前合并好flower和flower_2不就行了？我们不讨论分割重用组合一类的优化问题。之所以现在可以提前合并，原因就在于两张图的宽高完全一样，如果第1张图的大小是第2张图的两倍。
那么效果就会如下图所示
大概你还是觉得无所谓，我把红框所选中的区域合并成一张图片也一样可以平铺，但这样文件显然增大了。抛开这个问题不说，如果两张图的尺寸不成比例关系，那合并的方法就跪了。
而且多重背景还有一个优点，它可以针对不同的背景设置不同的background-repeat，background-position和background-size等属性。
比如这样
body {
background:url(/i/bg_flower.gif), url(/i/bg_flower_2.gif);
background-repeat:no-repeat, repeat;
}
效果就如下图所示
怎么样，单背景没戏了吧。
此外，background-position和background-size等属性还能这么玩。
比如下面的代码
body {
background:url(/i/bg_flower.gif), url(/i/bg_flower_2.gif);
background-repeat:no-repeat, repeat;
background-position:centercenter,0% 0%;
}
则效果如下图所示
不难发现，这些属性的值全部都用英文逗号分隔，一个背景对应一个值，所以语法非常直观。
更简单的写法，是直接在background中用英文空格分隔每一项的属性，这样可以节省更多的字节数。
body{
background:url(/i/bg_flower.gif) no-repeat 50% 50%, url(/i/bg_flower_2.gif) repeat 0% 0%;
}
切菜用牛刀（伪元素）是一件很让人哭笑不得的事情，所以CSS3特地为我们准备了一把轻量级的菜刀（多重背景），使用起来非常顺手，而且效果相当到位。大家在网页设计的过程中，应尽可能选择最适合实际需求的方法，从而更高效地完成任务。一句话，没有最好的，只有最合适的。
