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

您可以尝试使用 rgba 设置背景，background: rgba(0, 0, 0, 0.6);就像0.6不透明度一样。或者将具有不透明度的背景放在某个 div 中，然后在该 div 内部创建另一个具有内容且没有不透明度的 div。