Question

我有一个使用css样式文件的网页，该文件具有以下属性：

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

正如您所看到的，此代码仅将背景图像放在div主体的顶部中心。但是，我需要在身体标签的底部中心提供背景图像，我该怎么做？谢谢！

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背景图片。

Answer 2

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

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

Answer 3

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

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

参考：W3C。

css风格的两个背景可能吗？

3 个答案: