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位数。

Source

Answer 3

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

CSS背景上的透明度会影响内容

3 个答案: