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

Question

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

有人可以解释一下不同浏览器如何呈现CSS不透明度吗？

提前致谢。

Answer 1

不透明度使用平均值操作完成，其中像素值基于不透明度的值而落后于weight-age。

例如，如果你有一个像素

在R: 200, G: 220, B: 100

10, 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

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

Answer 2

我不确切知道浏览器是如何呈现它的。但我知道具有不透明度属性的所有元素也会受到影响。

希望这会对你有所帮助。