带Alpha通道的色彩叠加问题

css3的rgba色彩模式、png/gif图片的alpha通道、canvas的rgba色彩模式、css3的阴影、css3的opacity属性等等，这些应用在网页中，有意无意间，我们的页面多了许多半透明的效果。我们知道，在没有alpha通道的情况下，两个颜色叠加，上层的颜色会直接覆盖下层的颜色，但有了alpha通道，一切就没有这么简单了。今天，我们就要探讨一下，网页中，rgba(r1, g1, b1, a1) + rgba(r2, g2, b2, a2)会得到什么。

为表述方便，不妨假设最后我们得到的色彩是rgba(r, g, b, a)。

先考虑透明度。一个色彩透明度opacity介于0到1之间，opacity=0表示完全透明，opacity=1表示不透明。把要叠加上来的色彩想象成一块玻璃，如果这块玻璃的透明度是0.2，意味着它允许透过80%的光线，阻挡20%的光线。

好，现在想象有两块玻璃，透明度分别是a1和a2，那么光线的通过率分别为1-a1和1-a2。所以可以认为，光线穿过第一块玻璃后，剩余1-a1；再通过第二块玻璃后，还有(1-a1)(1-a2)，这就是两块玻璃的综合透光率，相应的，透明度就是1-(1-a1)(1-a2)。

所以我们能得到第一个结论：

，即接下来考虑rgb各分量，它们的计算方法是一样的，我们仅以r通道为例，进行推导。还是想象一块半透明的玻璃，它本身是红色的，但由于它允许其他光线透过，所以玻璃本身的颜色会变淡。人们实际感受到的颜色，只是玻璃原本的颜色乘以透明度的结果。

如果有两块玻璃呢，它们的红色浓度分别是r1和r2，透明度分别是a1和a2。那么第一块玻璃让人感受到的红色浓度为r1a1，第二块玻璃让人感受到的红色浓度为r2a2，第一块玻璃的红色色彩穿过第二块玻璃，并与第二块的红色叠加在一起的颜色浓度就是：

接下来，我们再把两块玻璃合起来，当成一块玻璃，这个整体的红色浓度为r，透明度为a。这个a我们之前已经推导过了，是a1+a2-a1a2。那么，我们有：

由这两个等式，我们可以得出：

g和b两个分量上也是如此，在此从略。从推导出来的等式上，我们能直接得出一个结论：颜色叠加的运算，不具备交换率、结合率，也就是说，叠加的顺序很重要。

最后来验证一下吧：

知乎上也有讨论 不断叠加两个 50% 透明的颜色是否能得到一个百分百不透明的颜色？

转载自 周骅