CSS的两个背景

Question

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.

.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?

Answer 1

css3 提供了多种背景：

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

但是，较旧的浏览器不支持 css3。特别是 IE8 及以下不支持它 - IE9 支持。

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

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

编辑：

语法如下所示：

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