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% 透明的颜色是否能得到一个百分百不透明的颜色?

转载自 周骅

带Alpha通道的色彩叠加问题的更多相关文章

  1. 使用GDI+保存带Alpha通道的图像(续)

    之前结合网上的一些代码及ATL::CImage的实现,自己写了一个将HBITMAP以PNG格式保存到文件到函数.见上一篇日记. 不过,后来换了个环境又发现了问题,昨天和今天上午把<Windows ...

  2. 使用GDI+保存带Alpha通道的图像

    带Alpha通道的图像(ARBG)在通过GDIPlus::Bitmap::FromHBITMAP等转为GDI+位图,再存储时,透明区域会变成纯黑(也有可能是纯白?).   网上找了两段保持透明的实现代 ...

  3. Unity中带有alpha通道的视频叠加播放

    问题: 如何让两个透明视频叠加播放 解决播放: 1:使用Unity自带的shader,shader代码如下所示 Shader "Unlit/MaskVideo" { Propert ...

  4. Unity 播放 带 alpha 通道的视频(Video Player组件)

    孙广东  2017.6.18 http://blog.csdn.NET/u010019717 通常是  .webm类型文件!!!!!  你可以下载这个文件到本地: Http://tsubakit1.s ...

  5. 什么是Alpha通道?

    图像处理(Alpha通道,RGB,...)祁连山(Adobe 系列教程)****的UI课程 一个也许很傻的问题,在图像处理中alpha到底是什么?  Alpha通道是计算机图形学中的术语,指的是特别的 ...

  6. Alpha通道

     Alpha通道是计算机图形学中的术语,指的是特别的通道,意思是“非彩色”通道,主要是用来保存选区和编辑选区.真正让图片变透明的不是Alpha 实际是Alpha所代表的数值和其他数值做了一次运算  为 ...

  7. PIE SDK Alpha通道数据渲染

    1.  功能简介 在计算机图形学中,一个RGB颜色模型的真彩图形,用由红.绿.蓝三个色彩信息通道合成的,每个通道用了8位色彩深度,共计24位,包含了所有彩色信息.为实现图形的透明效果,采取在图形文件的 ...

  8. 如何基于纯GDI实现alpha通道的矢量和文字绘制

    今天有人在QQ群里问GDI能不能支持带alpha通道的线条绘制? 大家的答案当然是否定的,很多人推荐用GDI+. 一个基本的图形引擎要包括几个方面的支持:位图绘制,文字绘制,矢量绘制(如矩形,线条). ...

  9. 【计算机视觉】OPENCV对于有alpha通道的透明背景图片的读取和图片叠加

    这个是我自己做的粗略的螺旋丸的图,导出为png并带有alpha通道. 最后和一只狗合成成这个样子. 效果还是可以的. 为了实现这个效果,首先我们要明白具有透明通道的图片的OpenCV的读取方式.在Op ...

随机推荐

  1. ionic开发之Android可以很快打开主页,iOS要几分钟打开主页

    原来是gap://ready导致的csp问题,日志会有这样的提示 解决的办法就是在你的index.html添加gap:的csp配置 <meta http-equiv="Content- ...

  2. Python+Selenium笔记(四):unittest的Test Suite(测试套件)

    (一) Test Suite测试套件 一个测试套件是多个测试或测试用例的集合,是针对被测程序的对应的功能和模块创建的一组测试,一个测试套件内的测试用例将一起执行. 应用unittest的TestSui ...

  3. 10分钟让你明白MySQL是如何利用索引的

    一.前言 在MySQL中进行SQL优化的时候,经常会在一些情况下,对MySQL能否利用索引有一些迷惑. 譬如: MySQL 在遇到范围查询条件的时候就停止匹配了,那么到底是哪些范围条件? MySQL ...

  4. pychram使用技巧

    1.代码添加断点 点击对应行代码,按ctrl+F8,即可添加断点 2.查看内置函数的源码 点击对应函数后按crtl+B

  5. centos中,tomcat项目创建文件的权限

    参考文章:https://cloud.tencent.com/info/5f02caa932fd6dbfc46a3bb01af135e0.html 我们在centos中输入umask,会看到输出002 ...

  6. Windows Phone 8 获取与监听网络连接状态(转)

    原文地址:http://www.cnblogs.com/sonic1abc/archive/2013/04/02/2995196.html 现在的只能手机对网络的依赖程度都很高,尤其是新闻.微博.音乐 ...

  7. JQuery 学习笔记-2017.05.22

    JQuery jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效 ...

  8. PyQt5--MainWindow

    # -*- coding:utf-8 -*- ''' Created on Sep 14, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...

  9. 有关于分布式缓存Hazelcast

    如果在内网段中部署或者启动缓存服务.不能存在相同的组名称.如同使用dubbo一样,会导致无法连接到缓存节点

  10. ModuleNotFoundError No module named urllib2

    ModuleNotFoundError No module named urllib2?那么在进行编辑的来进行代码上开发,那就会出现的来代码的上错误,也是版本的上差异导致的问题.   工具/原料   ...