两个互相背景的CSS

我有一个div，我想应用两个背景。基本上我有一个小图片，将在整个div中重复，另一个大图片（不重复）。我试图让两个相同大小的div放在另一个上面，这里是它的作品的CSS代码，但我想以更时尚的方式来做。两个互相背景的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图像）和我希望把在其上另一张图片，任何提示或技巧来做到这一点？

来源

2012-02-10 Mohamed Turki

什么是你的HTML样子？另外，您不会对图像应用不重复的操作。 – scottheckel 2012-02-10 13:54:09

我认为这是获得成就的最佳方式。但是我会对别人的话有兴趣。 – 2012-02-10 13:57:45

重叠的div是目前最好的解决方案，随着IE浏览器按照@Oliver的说法死于火热的死亡，css3的多重背景值在不断增长。 – 2012-02-10 14:00:06

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;

来源

2012-02-10 13:57:07 Oliver

但是如何将它们分层而不使用另一个div？ – 2012-02-10 14:03:38

@MohamedTurki你读过他的回答了吗？多个背景，一个div。 – ANeves 2012-02-10 14:08:37

@MohamedTurki看我的编辑。只有一个元素'.science'，并为它提供了上面我写的多个背景的CSS。请记住，除非使用css3pie，否则这不适用于旧版本的Internet Explorer。 – Oliver 2012-02-10 14:13:27

您可以使用伪元素，比如：以后还是：要做到这一点之前：http://jsfiddle.net/JUsXx/

或者你可以使用CSS3多种背景：http://www.css3.info/preview/multiple-backgrounds/（现场示例：http://jsfiddle.net/JUsXx/1/）

来源

2012-02-10 14:01:35

+1。但请避免参考w3schools：http://w3fools.com/ – ANeves 2012-02-10 14:09:50

@我知道。但我找不到另一张转运图片。 – 2012-02-10 14:13:54

必须改变一些东西。上述两个小提琴似乎都不起作用了。 – clayRay 2017-07-18 06:18:03

个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; 
}

来源

2012-02-10 14:02:03

两个互相背景的CSS

回答

相关问题