两个背景，彼此用CSS

I have a div that i want to apply two backgrounds to it. Basically I have one small picture that will be repeated all over the div, and another big one (no repeats). I tried to make two divs of the same size layed one upon the other and here is the CSS code it works but I want to do it in a more fashionable way.

我有一个div，我想应用两个背景。基本上，我有一个小图片会在整个div中重复，另一个大图片(不会重复)。我试着把两个相同大小的div放在一起，这是它的CSS代码，但是我想用一种更时尚的方式。

.science_wrap{
background-image: url(../bg/graph-paper-background.png);
width:100%;
height: 694px;
margin: 0 auto;

}

.science {
background-image: url(../bg/prospectus-science-line.png);
width:100%;
height: 694px;
margin: 0 auto;

}

Also, i have another div which will have one strip on the top (i have a bg image for it) and I want to put upon it another picture, any tips or tricks to do this?

另外，我还有另一个div它的顶部会有一个长条(我有一个bg的图片)，我想在它上面放另一个图片，有什么提示或技巧吗?

3 个解决方案

#1

css3 has provision for multiple backgrounds:

css3提供了多种背景:

http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering

http://www.w3.org/TR/2005/WD-css3-background-20050216/分层

However, older browsers do not support css3. In particular, IE8 and below do not support it - IE9 does.

但是，旧的浏览器不支持css3。特别是，IE8和以下版本不支持它——IE9支持。

You can use css3pie to force support for css3 in older versions of IE, but it can be a little slow, and has some bugs.

您可以使用css3pie在旧版本的IE中强制支持css3，但是它可能有点慢，并且有一些bug。

If you need to support IE6 it is best to continue using your existing method, I think.

如果您需要支持IE6，我认为最好继续使用现有的方法。

EDIT:

编辑:

The syntax will look something like this:

语法将如下所示:

background-image: url(../bg/graph-paper-background.png), url(../bg/prospectus-science-line.png);
background-repeat: no-repeat, repeat-y;

#2

You can use psuedo elements like :after or :before to do this: http://jsfiddle.net/JUsXx/

您可以使用psuedo元素，比如:after or:before，来完成以下操作:http://jsfiddle.net/JUsXx/

Or you can use CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/ (live example: http://jsfiddle.net/JUsXx/1/)

或者您可以使用CSS3多重背景:http://www.css3.info/preview/multibackgrounds/(活生生的例子:http://jsfiddle.net/JUsXx/1/)

#3

CSS Pseudo's :before and :after will help you here. They are also more compatible than CSS3's multiple backgrounds.

CSS Pseudo's:before和:after将在这里帮助您。它们也比CSS3的多重背景更加兼容。

.science_wrap {
   background-image: url(../bg/graph-paper-background.png);
   width:100%;
   height: 694px;
   margin: 0 auto;
}

.science_wrap:before {
    content:'';
    display:block;
    background-image: url(../bg/prospectus-science-line.png);
    width:100%;
    height: 694px;
}

#1