覆蓋在HTML解決

Question

正如你可以在這裏看到：

http://clients.noxxie.nl/rashosting/

我在圖像變亮黑色背景使用覆蓋。 但文本也在疊加，這是不會發生的。

現在有人如何解決它嗎？

Answer 1

您的.text容器的opacity爲0.5，並且正在由其兄弟內容繼承。您可以通過使用rgba顏色的容器，而不是不透明度（解決它雖然沒有在IE（IE9及以上，我相信稀疏的支持），像這樣：

.text { 
background-color: rgba(0, 0, 0, 0.5); 
} 

或者你可以使用一個1x1半透明PNG 。圖像作爲容器上的背景的另一種方法是創建一個疊加的div，絕對定位以支付與不透明的.text容器和z-index低到足以留下一切事情是這樣的：

HTML

<div class="overlay">&nbsp;</div> 

您可以將.overlay div放在您的.text容器的右側，位於div的底部。

CSS

.text { 
    position:relative; 
    z-index:10; 
} 

.overlay { 
    position:absolute; 
    top:0; right:0; bottom:0; left:0; 
    background-color:black; 
    opacity:0.5 
    z-index:1; 
}