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小提琴要说清楚：http://jsfiddle.net/WFxbH/

Answer 1

编辑：无法驾驭不透明的层叠。我小齿轮的最佳替代方案是使用单个像素85％不透明度黑色png作为背景图像。选项2将使内部内容实际上在div之外，然后将其定位，但这更加挑剔。您甚至可以在IE中使用透明的png而不会有太多麻烦。

IGNORE：不是正面的，因为我现在无法测试它，但我认为文字随着不透明度的变化而变得半透明。也许如果你把文字放在带有background-color的span中：none和color：white;它可能会解决它。可能必须将跨度不透明度设置为100％才能覆盖。

Answer 2

Thew，不透明度会影响整个元素及其内容，而不仅仅是背景颜色。如果您只想让背景颜色为85％黑色，则应使用RGBA颜色指定它，如下所示：

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

Answer 3

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

Live Demo - 这将有效"in every browser you care about"，我的jsFiddle包含推荐的IE conditional comment，以使其也可以在该浏览器中使用。

.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)";
}

红色bg +黑色字段，不透明度为85 =粉红色文字

3 个答案: