如何在背景圖片上放置背景圖片？

我已經在body和.wrap中設置了背景圖片。我的問題是如何將背景放在他們之上？這是用CSS完成的，但我還沒有確定它。如何在背景圖片上放置背景圖片？

謝謝。

<body> 
    <div class="wrap"> 
    </div> 
</body>

來源

2011-10-31 JohnQ

嘗試zindex您想要顯示在上面的圖像。 – Unknown

隨着z-index： http://jsfiddle.net/7sdnU/2/

來源

2011-10-31 08:42:24 Mathieu

謝謝！然而，它高於圖像，文本框等。我嘗試過'.image {z-index：2; '沒有運氣。我更新了這裏的小提琴http://jsfiddle.net/7sdnU/14/ – JohnQ

這樣？ http://jsfiddle.net/7sdnU/16/ – Mathieu

的html元件也可以樣式，所以可以一個元素的背景層移回。事情是這樣的：

html { 
    background:url(bottom-background.png); 
} 
body { 
    background:url(middle-background.png); 
} 
wrap { 
    background:url(top-background.png); 
} 
/* Make sure everything takes up the whole viewport */ 
html, body, .wrap{ 
    height:100%; 
    width:100%; 
    padding:0; 
    margin:0; 
}

演示：http://jsfiddle.net/7sdnU/15/

你也可以只添加其他包裝的div：

<body> 
    <div class="wrap"> 
     <div class="inner"> 
     </div> 
    </div> 
</body>

然後應用「頂」背景.inner

然而，CSS3允許multiple backgrounds，所以你可能想看看 - 這是最好的解決方案，如果你可以使用它，但它不完全支持。

來源

2011-10-31 08:45:37

經過測試後，對角線背景只能在包裝中，而不是在整個文檔中... – JohnQ

好吧，我明白你的意思了。你必須使'。wrap'的高度和寬度達到100％，或者如果你可以使用CSS3 - 多個背景是一個很好的解決方案。我的互聯網正在切入和退出，所以對不起我無法修復演示... –

更新後的演示和文章 - 嘗試一下，我仍然不確定它應該是什麼樣子 - 圖像非常細小而我的糟糕聯繫使得很難爲演示找到更好的圖像。 –

如何在背景圖片上放置背景圖片？

回答

相關問題