CSS样式可以有两个背景吗？

Question

我有一个网页，使用了一个CSS样式文件，其中有这个属性：

body { 
   background: #7a9c12 url(images/main_background.jpg) top center no-repeat; 
   color: #bbb;
   font: 12px/14px helvetica, arial,Sans-serif; 
}

你可以看到这段代码只在div body的顶部中心放置了一个背景图像。但是，我还需要在body标签的底部中心放置一个背景图像，我该怎么做呢？谢谢！

- DomingoSL

Answer 1

如果你没有使用CSS3，一个选择是将背景图片叠加在你的html和body标签上：

html {
   background: #7a9c12 url(images/main_background_top.jpg) top center no-repeat;
}

body {
   background: url(images/main_background_bottom.jpg) bottom center no-repeat;
}

请确保只将纯色背景应用于html背景属性，否则会覆盖图像，只能看到body背景图像。

- Pat

Answer 2

使用CSS3，您可以通过逗号分隔的方式拥有多个背景。请参阅文档。例如：

background: url(banner.png) top center no-repeat, 
            url(footer.png) bottom center no-repeat;

- William Niu

Answer 3

CSS2.1不行，但CSS3可以。

CSS3中，一个盒子的背景可以有多个层。层数由“background-image”属性中逗号分隔值的数量决定。

参考资料：W3C。

- Topera