带Alpha通道的色彩叠加问题
写于2015年3月23日,可能已过时,请谨慎参考。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)
。所以我们能得到第一个结论:
![带Alpha通道的色彩叠加问题](https://img.it610.com/image/info10/cb89f53d7d274ade9f383e0203ab8838.gif)
文章图片
,即
![带Alpha通道的色彩叠加问题](https://img.it610.com/image/info10/01a87cceb7074816a56ec86d7209da24.jpg)
文章图片
接下来考虑rgb各分量,它们的计算方法是一样的,我们仅以r通道为例,进行推导。还是想象一块半透明的玻璃,它本身是红色的,但由于它允许其他光线透过,所以玻璃本身的颜色会变淡。人们实际感受到的颜色,只是玻璃原本的颜色乘以透明度的结果。
【带Alpha通道的色彩叠加问题】如果有两块玻璃呢,它们的红色浓度分别是
r1
和r2
,透明度分别是a1
和a2
。那么第一块玻璃让人感受到的红色浓度为r1a1
,第二块玻璃让人感受到的红色浓度为r2a2
,第一块玻璃的红色色彩穿过第二块玻璃,并与第二块的红色叠加在一起的颜色浓度就是:![带Alpha通道的色彩叠加问题](https://img.it610.com/image/info10/434872a0c1a84482a546b918f29fa240.jpg)
文章图片
接下来,我们再把两块玻璃合起来,当成一块玻璃,这个整体的红色浓度为
r
,透明度为
a
。这个
a
我们之前已经推导过了,是
a1 + a2 - a1a2
。那么,我们有:
![带Alpha通道的色彩叠加问题](https://img.it610.com/image/info10/22de07bbf3ca4b49bdc666917e5639e8.jpg)
文章图片
由这两个等式,我们可以得出:
![带Alpha通道的色彩叠加问题](https://img.it610.com/image/info10/8be5fed38e2d4e49a91026363bffa30d.jpg)
文章图片
g和b两个分量上也是如此,在此从略。从推导出来的等式上,我们能直接得出一个结论:颜色叠加的运算,不具备交换率、结合率,也就是说,叠加的顺序很重要。
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 精神,带我走向人生的天堂!
- 带有Hilt的Android上的依赖注入
- python自定义封装带颜色的logging模块
- 皮夹克
- 油菜花田的小路像绶带
- 不废话,代码实践带你掌握|不废话,代码实践带你掌握 强缓存、协商缓存!
- 《离开却带走了“能量的魔杖”(52)》能量爱情公寓
- 《生不带来死不带去》
- 爸爸带我买文具。