红色 bg +黑色区域，不透明度为 85 = 粉红色文本

Question

<style>
* {
    background: red;
}
.blackbalk{
    background:black;
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter:alpha(opacity=85); 
    -khtml-opacity:.85; 
    -moz-opacity:.85; 
    opacity:.85; 
    width: 985px;
    margin: 0 auto;
    height:255px;
    color: white; 
}
</style>
<div class="blackbalk">Text </div>

现在我的文字变成粉红色，为什么？ 怎样才能让它再次变白呢？

问候

编辑：JS Fiddle 说清楚： http://jsfiddle.net/WFxbH/

Answer 1

您可以通过在元素上使用 rgba 背景来实现：

现场演示 - 这将在"中工作你关心的每个浏览器”，我的 jsFiddle 包含推荐的 IE 条件注释 使其也可以在该浏览器中工作。

.blackbalk {
     /* 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.85);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}

Answer 2

嗯，不透明度影响整个元素及其内容，而不仅仅是背景颜色。如果您只想将背景颜色设置为 85% 黑色，则应该使用 RGBA 颜色来指定它，如下所示：

.blackbalk {
    background: rgba(0, 0, 0, 0.85);
    width: 985px;
    margin: 0 auto;
    height: 255px;
    color: white;
}

Answer 3

编辑：无法克服不透明度的级联。我的最佳选择是使用单像素 85% 不透明度黑色 png 作为背景图像。选项 2 是让内部内容实际上位于 div 之外，然后将其放置在上面，但这要挑剔得多。您甚至可以让透明 png 在 IE 中工作，而不需要太多麻烦。

忽略：不是积极的，因为我现在无法测试它，但我认为文本随着不透明度的变化而变得半透明。也许如果您将文本放在背景颜色：无和颜色：白色的范围内；也许可以解决。可能必须将跨度不透明度设置为 100% 才能覆盖。