css风格的两种背景可能吗？答案

【问题标题】：Two backgrounds on css style possible?css风格的两种背景可能吗？
【发布时间】：2010-08-30 10:29:45
【问题描述】：

我有一个使用具有此属性的 css 样式文件的网页：

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

如您所见，此代码仅将背景图像放在 div 主体的顶部中心。但是，我也需要在 body 标签的 botton center 有一个背景图片，我该怎么做？谢谢！

【问题讨论】：

标签： html css

【解决方案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 背景图像。

【讨论】：

【解决方案2】：

使用 CSS2.1，不，这是不可能的。使用 CSS3，是的，你可以。

框的背景可以有 CSS3 中的多层。的数量层数由层数决定逗号分隔的值 “背景图像”属性。

参考：W3C。

【讨论】：

【解决方案3】：

使用 CSS3，您可以拥有多个背景，以逗号分隔。请参阅documentation。例如

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

【讨论】：