オーバーレイあなたがここに見ることができるように

Question

を修正：

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

私がイメージ軽い黒の背景にオーバーレイを使用しています。 しかし、テキストもオーバーレイにあり、それは起こりません。

誰でも今修正する方法はありますか？

Answer 1

.textコンテナのサイズがopacityで、兄弟の内容に継承されています。あなたは（代わりに不透明の容器上にrgba色を使って、それを修正することができますので、のように、私は信じているIE（IE9で上記のスパースサポート）がありますが、：

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

それとも、1x1の半透過PNGを使用することができますそのコンテナの背景として画像もう一つの方法は絶対に不透明度および他のすべての後ろに滞在するのに十分低いz-indexで.textコンテナをカバーするように配置オーバーレイのdivを、作成することです。このような何か：。。

HTML

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

.textコンテナの中の.overlay divを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; 
}