红色背景 + 不透明度为 85 的黑色区域 = 粉色文本

Posted 2023-03-06

【中文标题】红色背景 + 不透明度为 85 的黑色区域 = 粉色文本

【英文标题】：Red bg + black field with opacity on 85 = pink text

【发布时间】：2011-07-06 20:02:25

【问题描述】：

<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/

【参考方案1】：

您可以改为在元素上使用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)";

【参考方案2】：

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

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

【参考方案3】：

编辑：不能超越不透明度的级联。在我的小齿轮中，最好的选择是使用单像素 85% 不透明度黑色 png 作为背景图像。选项 2 是使内部内容实际上位于 div 之外，然后将其放置在上面，但这更加挑剔。你甚至可以毫不费力地让透明 png 在 IE 中工作。

忽略：不是肯定的，因为我现在无法测试它，但我认为文本随着不透明度的变化而变得半透明。也许如果你把你的文本放在一个带有 background-color:none 和 color:white; 的范围内。它可能会解决。可能必须将跨度不透明度设置为 100% 才能覆盖。

【讨论】：

哦，误会了原意。虽然我仍然用它自己的不透明度变量嵌套文本可能会解决这个问题。

三十点的回答实际上看起来很棒。我刚刚学到了一些新东西。