我注意到,在应用“淡入”效果时,模式对话框的颜色会发生变化。那么,想知道,CSS 属性“不透明度”在浏览器中究竟是如何呈现的?
谁能解释一下不同的浏览器如何呈现 CSS 不透明度?
提前致谢。
不透明度是通过基于不透明度值的权重年龄对像素值进行平均操作来完成的。
例如,如果您有一个像素
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
将对半透明元素跌落的所有像素执行上述计算(可能在硬件级别)。
我不确切知道浏览器是如何渲染它的。但我知道具有 opacity 属性的元素中的所有元素也会受到影响。
希望这对您有所帮助。