带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% 透明的颜色是否能得到一个百分百不透明的颜色?
转载自 周骅
带Alpha通道的色彩叠加问题的更多相关文章
- 使用GDI+保存带Alpha通道的图像(续)
之前结合网上的一些代码及ATL::CImage的实现,自己写了一个将HBITMAP以PNG格式保存到文件到函数.见上一篇日记. 不过,后来换了个环境又发现了问题,昨天和今天上午把<Windows ...
- 使用GDI+保存带Alpha通道的图像
带Alpha通道的图像(ARBG)在通过GDIPlus::Bitmap::FromHBITMAP等转为GDI+位图,再存储时,透明区域会变成纯黑(也有可能是纯白?). 网上找了两段保持透明的实现代 ...
- Unity中带有alpha通道的视频叠加播放
问题: 如何让两个透明视频叠加播放 解决播放: 1:使用Unity自带的shader,shader代码如下所示 Shader "Unlit/MaskVideo" { Propert ...
- Unity 播放 带 alpha 通道的视频(Video Player组件)
孙广东 2017.6.18 http://blog.csdn.NET/u010019717 通常是 .webm类型文件!!!!! 你可以下载这个文件到本地: Http://tsubakit1.s ...
- 什么是Alpha通道?
图像处理(Alpha通道,RGB,...)祁连山(Adobe 系列教程)****的UI课程 一个也许很傻的问题,在图像处理中alpha到底是什么? Alpha通道是计算机图形学中的术语,指的是特别的 ...
- Alpha通道
Alpha通道是计算机图形学中的术语,指的是特别的通道,意思是“非彩色”通道,主要是用来保存选区和编辑选区.真正让图片变透明的不是Alpha 实际是Alpha所代表的数值和其他数值做了一次运算 为 ...
- PIE SDK Alpha通道数据渲染
1. 功能简介 在计算机图形学中,一个RGB颜色模型的真彩图形,用由红.绿.蓝三个色彩信息通道合成的,每个通道用了8位色彩深度,共计24位,包含了所有彩色信息.为实现图形的透明效果,采取在图形文件的 ...
- 如何基于纯GDI实现alpha通道的矢量和文字绘制
今天有人在QQ群里问GDI能不能支持带alpha通道的线条绘制? 大家的答案当然是否定的,很多人推荐用GDI+. 一个基本的图形引擎要包括几个方面的支持:位图绘制,文字绘制,矢量绘制(如矩形,线条). ...
- 【计算机视觉】OPENCV对于有alpha通道的透明背景图片的读取和图片叠加
这个是我自己做的粗略的螺旋丸的图,导出为png并带有alpha通道. 最后和一只狗合成成这个样子. 效果还是可以的. 为了实现这个效果,首先我们要明白具有透明通道的图片的OpenCV的读取方式.在Op ...
随机推荐
- ionic开发之Android可以很快打开主页,iOS要几分钟打开主页
原来是gap://ready导致的csp问题,日志会有这样的提示 解决的办法就是在你的index.html添加gap:的csp配置 <meta http-equiv="Content- ...
- Python+Selenium笔记(四):unittest的Test Suite(测试套件)
(一) Test Suite测试套件 一个测试套件是多个测试或测试用例的集合,是针对被测程序的对应的功能和模块创建的一组测试,一个测试套件内的测试用例将一起执行. 应用unittest的TestSui ...
- 10分钟让你明白MySQL是如何利用索引的
一.前言 在MySQL中进行SQL优化的时候,经常会在一些情况下,对MySQL能否利用索引有一些迷惑. 譬如: MySQL 在遇到范围查询条件的时候就停止匹配了,那么到底是哪些范围条件? MySQL ...
- pychram使用技巧
1.代码添加断点 点击对应行代码,按ctrl+F8,即可添加断点 2.查看内置函数的源码 点击对应函数后按crtl+B
- centos中,tomcat项目创建文件的权限
参考文章:https://cloud.tencent.com/info/5f02caa932fd6dbfc46a3bb01af135e0.html 我们在centos中输入umask,会看到输出002 ...
- Windows Phone 8 获取与监听网络连接状态(转)
原文地址:http://www.cnblogs.com/sonic1abc/archive/2013/04/02/2995196.html 现在的只能手机对网络的依赖程度都很高,尤其是新闻.微博.音乐 ...
- JQuery 学习笔记-2017.05.22
JQuery jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效 ...
- PyQt5--MainWindow
# -*- coding:utf-8 -*- ''' Created on Sep 14, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...
- 有关于分布式缓存Hazelcast
如果在内网段中部署或者启动缓存服务.不能存在相同的组名称.如同使用dubbo一样,会导致无法连接到缓存节点
- ModuleNotFoundError No module named urllib2
ModuleNotFoundError No module named urllib2?那么在进行编辑的来进行代码上开发,那就会出现的来代码的上错误,也是版本的上差异导致的问题. 工具/原料 ...