CSS 属性“不透明度”如何在浏览器（IE、Chrome、Firefox、Opera）中呈现？答案

【问题标题】：How CSS property "opacity" renders in browsers (IE, Chrome, Firefox, Opera)?CSS 属性“不透明度”如何在浏览器（IE、Chrome、Firefox、Opera）中呈现？
【发布时间】：2013-03-28 07:00:43
【问题描述】：

我注意到，在应用“淡入”效果时，模式对话框的颜色会发生变化。那么，想知道，CSS 属性“不透明度”究竟是如何在浏览器中呈现的？

谁能解释一下不同的浏览器如何呈现 CSS 不透明度？

提前致谢。

【问题讨论】：

在旧的 Internet Explorer 浏览器中.. 不透明度呈现为空！
旧版 IE (
@IgorJerosimić，感谢您的回复。但我想知道浏览器 CSS 渲染引擎如何为 CSS 属性“不透明度”工作。
不透明度是通过 average 操作完成的，像素值在后面，权重基于 opacity 的值。
@techfoobar 感谢您的回复

标签： css browser

【解决方案1】：

Opacity 是通过 average 操作完成的，像素值是基于 opacity 值的 weight-age 落后的。

例如，如果你有一个像素

R: 200, G: 220, B: 10010, 10

如果你想渲染一个背景颜色为150, 120, 100 和opacity: 0.5 的元素，那么生成的像素颜色将被计算为：

opacity = 0.5

R = 200 * (1-opacity) + 150 * opacity
G = 220 * (1-opacity) + 120 * opacity
B = 100 * (1-opacity) + 100 * opacity

将对半透明元素跌落的所有像素执行上述计算（可能在硬件级别）。

【讨论】：

【解决方案2】：

我不确切知道浏览器是如何渲染它的。但我知道具有 opacity 属性的元素中的所有元素也会受到影响。

希望对你有所帮助。

【讨论】：