CSS：圖像背景 - 如何防止它？

我有以下情況：CSS：圖像背景 - 如何防止它？

<html> 
    <head> 
    <title> 
     Title 
    </title> 
    <style type="text/css"> 
     #wrapper { 
     width: 100%; 
     } 

     #thingy { 
     position: absolute; 
     top: 20px; 
     background-image: url("bg.png"); 
     width: 100%; 
     height: 4px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <img src="test.png" alt=""/> 
     <div id="thingy">&nbsp;</div> 
    </div> 
    </body> 
</html>

test.png是相同的圖像，bg.png是1×4的背景圖像。

問題是：元素#thingy顯示在圖像的前面，所以一行直接穿過圖像。這不應該發生，應該在圖像後面顯示#thingy。玩Z指數不會做任何事情...

任何提示？

感謝，約斯特

編輯：更多的細節：我們的目標是獲得一個標題橫幅（test.png以上），其下設一個水平線。該行必須跨越標題區域的整個寬度（因此寬度：100％），橫幅必須保持居中。

來源

2012-03-27 Jost

這發生在Chrome和Firefox中，所以我想這不是一個瀏覽器的具體問題。 – Jost 2012-03-27 19:34:13

爲圖片提供完全合格的網址（http：//「），以便我們可以進行測試 – 2012-03-27 19:36:23

在圖像上聲明position: relative並給它一個z-index可以糾正行爲。請看下圖：

#thingy { 
    position: absolute; 
    top: 50px; 
    background-image: url("bg.png"); 
    width: 100%; 
    height: 4px; 
    z-index: 1; 
} 

#wrapper img { 
    position: relative; 
    z-index: 2500; 
}

來源

2012-03-27 19:39:48

肯定「thingy」顯示在圖像的前面，因爲它具有絕對位置。 z-index在這種情況下無法提供幫助，因爲圖像的位置是靜態的，z-index對它沒有影響。

我不知道你試圖達到什麼目標，但是當你將圖像定位到絕對位置時，z-index也會起作用。

編輯：編輯到你的問題現在有點更清晰你想要什麼。你爲什麼不把當前的背景圖像放在你的包裝的東西和背景圖像中？如果需要定位到背景位置。然後你將你的圖像置於包裝中，你就完成了。你需要「thingy」div在你的情況下沒有任何東西。

來源

2012-03-27 19:38:53

定位圖片相對也會改正行爲 – 2012-03-27 19:41:05

沒錯，處理這個問題有不同的可能性，而且我很確定根本不會有任何需要的位置，如果約斯特會解釋他想要做什麼。 – 2012-03-27 19:44:03

同意，這個問題對細節有些模糊。 – 2012-03-27 19:44:50

應用的z-index和位置設置爲圖像：

#wrapper img { 
    z-index: 100; 
    position: relative; 
} 

#thingy { 
    z-index: 99; 
}

來源

2012-03-27 19:42:32

我認爲你正在尋找這一點;

http://jsfiddle.net/mtariq/xmYpq/

來源

2012-03-27 19:49:30

CSS：圖像背景 - 如何防止它？

回答

相關問題