圖像透明地重疊文字

在this webpage I'm developing上，字母「Sa」和「Flu」以某種方式在圖像的後面和前面。圖像透明地重疊文字

圖像不完全在頂部 - 圖像沒有透明度，所以如果是這樣的話，文本根本就不可見。

但是，圖像顯然不在下面。

這是怎麼回事？

Screenshot

2012-08-25 8128

透明度來自具有不透明度設爲0.92，這將導致其所有的內容要稍微透明的，除非你指定的東西對孩子元素否則#maincontainer。

#maincontainer { 
    margin: 0; 
    padding-left: 14px; 
    padding-right: 14px; 
    padding-top: 10px; 
    padding-bottom: 0px; 
    text-align: justify; 
    opacity: 0.92; /* Your transparency */ 
}

更新：

設置z-index，如果你想在關係元素位置的元素沒有被定位是不夠的。 z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。這就是爲什麼solution suggested by Truth，將標題設置爲position: relative;的原因。現在可以使用z-index將圖像放置在文本下方。

來源

2012-08-25 12:52:21

在header DIV添加position: relative似乎解決了問題，那是因爲z-index不會在其上靜態定位（默認情況下，沒有position值），作爲Christofer's answer進一步解釋元素工作。

透明度從較高的容器傳播（在此例中爲#maincontainer）。

來源

2012-08-25 12:50:30

已經自由地進一步闡述了爲什麼您的解決方案在另外的答案中起作用。 –

有透明度，因爲你已經設置了圖片的不透明度。

拆除不透明這裏：

#maincontainer { 
    opacity: 0.92; /*< remove this line*/ 
    text-align: justify; 
}

解決此問題。

來源

2012-08-25 12:53:38

圖像透明地重疊文字

回答

相關問題