兩個互相背景的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

回答

相關問題