有两种css样式的背景?

i have a web page using a css style file who have this property:

我有一个使用css样式文件的网页，它有这个属性:

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

As you can see this code only puts a background image on the top center on the div body. But, i need a background image in the botton center too of the body tag, how can i do this? Thanks!

正如您所看到的，此代码只将背景图像放在div主体的顶部中心。但是，在body标签的botton center中我也需要一个背景图像，我怎么做呢?谢谢!

3 个解决方案

#1

An option if you're not using CSS3 is to layer the background images on your html and body tags:

如果你不使用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;
}

Just make sure you only apply a solid background colour to the html background property, otherwise you'll overlay the image and only see the body background image.

只要确保只对html背景属性应用纯背景颜色，否则将覆盖图像并只看到主体背景图像。

#2

With CSS2.1, no, it's impossible. With CSS3, yes, you can.

CSS2.1是不可能的。有了CSS3，是的，你可以。

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.

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

Reference: W3C.

参考:W3C。

#3

With CSS3, you can have multiple backgrounds, separated by commas. See the documentation. e.g.

使用CSS3，可以有多个背景，用逗号分隔。见文档。如。

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

#1