用CSS3将你的设计带入下个高度

4. 多背景图
CSS3 允许你使用多个属性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一个元素上添加多层背景图片.
在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是image, position 和repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
第一个图片将是离用户“最近”的那个。
该属性的一个更复杂的版本可以是这样的：
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在这里，(100% 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。
因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。
浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效扩展阅读： Layering multiple background images Multiple backgrounds with CSS3 and CSS3.info Introduction to CSS3, Part 6: Backgrounds