基本的なCSS - 上部に半透明のDIVをオーバーレイする方法

Question

私はこのブラウザをブラウザ（Chrome）でレンダリングするのに苦労しています。私はHTMLのすべての要素を保持するラッパーを持って、私は画像を保持するDIV（div-1と呼ぶことができます）を持っていて、この上にそれの上にオーバーレイdivを持っています。画像...任意の迅速なソリューション？あなたは、透明性と独自のイメージを作成する必要はありませんCSS3を使用して

Answer 1

.foo { 
    position : relative; 
} 
.foo .wrapper { 
    background-image : url('semi-trans.png'); 
    z-index : 10; 
    position : absolute; 
    top : 0; 
    left : 0; 
} 

<div class="foo"> 
    <img src="example.png" /> 
    <div class="wrapper">&nbsp;</div> 
</div> 

Answer 2

。

ちょうど次

position:absolute; 
left:0; 
background: rgba(255,255,255,.5); 

とdiv要素を持っているバックグラウンド（0.5）での最後のパラメータは、透明性のレベル（高い数はより不透明である）です。

Example Fiddle

Answer 3

ここDarkBeeの回答に似た純粋なCSSのソリューション、ですが、余分な.wrapperのdivを必要とせず：

.dimmed { 
    position: relative; 
} 

.dimmed:after { 
    content: " "; 
    z-index: 10; 
    display: block; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.5); 
} 

私はここでRGBAを使っていますが、もちろん、あなたが使用することができますもしあなたが好きなら、他の透明方法。

Answer 4

前の回答と同じですが、私は前にスタッキング目的のために::を置いていました。オーバーレイにテキストを含める場合（一般的な使用例）、:: beforeを使用してオーバーレイを修正する必要があります。

.dimmed { 
    position: relative; 
} 

.dimmed:before { 
    content: " "; 
    z-index: 10; 
    display: block; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.5); 
} 

Answer 5

div-elementの場合、効果を有効または無効にするクラスを使用して不透明度を設定できます。

.mute-all { 
    opacity: 0.4; 
}