CSS灰色文本不透明度和Firefox颜色问题答案

【问题标题】：CSS gray text opacity and Firefox color issueCSS灰色文本不透明度和Firefox颜色问题
【发布时间】：2011-12-16 07:37:55
【问题描述】：

我正在使用以下 jQuery 函数来更改文本的不透明度（它的颜色：#999999）

$('.small_buttons').css('opacity', 0.3);

在 Chrome 甚至 Internet Explorer 8 中效果看起来不错，但在当前版本的 Firefox (3.6.10) 中，此文本变得非常奇怪的绿色，而不是漂亮的浅灰色。

截图：

铬：

火狐：

帮助表示赞赏！

【问题讨论】：

这很奇怪。你能提供一个链接到你的页面进行测试吗？你确定你没有在FF中激活自定义颜色吗？工具 > 选项 > 内容 > 颜色 > “允许页面...”应检查颜色是否正确。
我无法用极少的代码实现这一点。你能告诉我们你在用什么吗？ jsfiddle.net/YnDFr
在div里加上文字颜色:#999999jsfiddle.net/YnDFr/1就可以看到这个效果了

【解决方案1】：

似乎是因为元素没有背景，或者被指定为透明。尝试为其添加与其容器相同的背景。

【讨论】：

是的，这行得通！添加 #fff 背景颜色后，它渲染得很好。这是一个已知的 Firefox 错误吗？在我的情况下，可以为容器添加纯色背景，但是如果我想在透明 div 中呈现它（并且图像背景将来自 DOM 树中更高级别的某个元素）怎么办？

【解决方案2】：

fyi：我在 FF 3.6 上遇到了同样的问题，找到了以下解决方案，它实际上适用于各种浏览器，不包括。 IE

只需使用以下语法：color: rgba(r,g,b,opacity);

即：color: rgba( 153, 153, 153, .5) ;

这会导致 color: #999999; 和 opacity: .5; 如果您的文本位于透明 DIV 上，则无需应用背景颜色。大多数现代浏览器，甚至 IE 9.0 都支持 RGBA() 颜色定义

【讨论】：

是的，你是对的，在 FF 3.6 中使用 rgba 确实不会导致这个问题（虽然不能使用 $('selector').css('opacity',''); 会使一些事情变得更成问题）。 FF 4 根本没有这个问题，所以我们很快就能忘记它。谢谢。