Question

我有一个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;

}

另外，我还有另一个div，顶部会有一个条带（我有一个bg图像），我想把它放到另一张图片，任何提示或技巧来做到这一点？

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;

Answer 2

您可以使用以下伪元素：after或：before：http://jsfiddle.net/JUsXx/

或者您可以使用CSS3多个背景：http://www.css3.info/preview/multiple-backgrounds/（实例：http://jsfiddle.net/JUsXx/1/）

Answer 3

CSS Pseudo's：之前和之后将帮助你。它们也比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;
}

两个背景与CSS

3 个答案: