css - 背景のCSS透明度はコンテンツに影響します

Question

私は次のようなCSSプロパティを持つdivを持っています：

div.header {
    opacity:0.4;
    filter:alpha(opacity=40);
    background:#000;
    width:300px;
    height:300px;
}

問題は、このdiv内のコンテンツも同じ透明度を持っていることです。そのdiv内のコンテンツに影響を与えずに、背景色/ divのみに透明度を表示させるにはどうすればよいですか？

Answer 1

あなたはrgba色を使うことができます：

div.header {
    background:rgba(0,0,0,0.4);
    width:300px;
    height:300px;
}

Answer 2

あなたはあなたのバックグラウンドで使うことができrgbaます：

div.header {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);

    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.4);

    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);

    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
}

IEの色は、次の式で計算されます。

Math.floor(0.4 * 255).toString(16); // 0.4 is your desired opacity

それはあなた66にそれが色の最初の2桁になるように与えます。

ソース

Answer 3

不透明度のようなrgbabackground: rgba(0, 0, 0, 0.6);で背景を設定してみることができ0.6ます。または、不透明度のある背景をあるdivに配置し、そのdiv内に、不透明度のないコンテンツを含む別のdivを作成します。