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

时间:2012-08-10 01:12:43

标签: css css3 transparency

我有一个带有CSS属性的div,如下所示:

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

问题是这个div里面的内容也有相同的透明度。我怎样才能让背景颜色/ div显示透明度而不影响div内的内容?

3 个答案:

答案 0 :(得分:4)

您可以使用rgba颜色:

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

答案 1 :(得分:3)

您可以在后台使用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

答案 2 :(得分:0)

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