Chrome中Alpha混合结果不符合预期的技术咨询
Chrome中Alpha混合结果不符合预期的技术咨询
我最近做了一个关于CSS颜色Alpha混合的小测试,结果在Chrome里发现了和预期不符的情况,想请大家帮忙解释一下原因。
我的测试代码如下:
<body style="background-color:rgb(0,0,0)"> <div style="background-color: rgba(0, 255, 0, 0.5)"> rgba(0, 255, 0, 0.5) </div> <div style="background-color: rgb(0, 127, 0)"> rgb(0, 127, 0) </div> </body>
按照我之前了解的Alpha混合公式 mix(c1, c2, a) = c1*(1-a) + c2*a(其中c1是背景色,c2是前景色,a是前景色的透明度),黑色背景(rgb(0,0,0))和半透明纯绿色(rgba(0,255,0,0.5))混合后,应该得到rgb(0,127,0),也就是第二个div的颜色。
但实际在Chrome 109(Mac OS X)浏览器中,我不仅能视觉上区分两个div的颜色,用GIMP取色器检测后发现,顶部半透明div的实际渲染颜色是rgb(19, 128, 13)。这让我特别疑惑:为什么绿色和黑色混合会导致红色和蓝色通道的数值增加,而且两个通道的增量还不一样?
另外我也在Firefox里做了测试,两个颜色看起来几乎完全一致,甚至可能是相同的。有没有人能解释一下Chrome里这个计算过程到底是怎样的,会得出rgb(19,128,13)这个结果?
备注:内容来源于stack exchange,提问作者Duncan
相关产品推荐
相关产品推荐

