CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。
在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于RGB图像。
CSS3中也引入了blend模式,对照Photoshop中的实现,有助于我们深入理解该方法的使用。
Opacity 不透明度
C=d*A+(1-d)*B
相对于不透明度而言,其反义就是透明度。这两个术语之间的关系就类似于正负之间的关系:100%的不透明度就是0%的透明度。该混合模式相对来说比较简单,在该混合模式下,
如果两个图层的叠放顺序不一样,其结果也是不一样的(当然50%透明除外)。
该公式中,A代表了上面图层像素的色彩值(A=像素值/255),d表示该层的透明度,B代表下面图层像素的色彩值(B=像素值/255),C代表了混合像素的色彩
值(真实的结果像素值应该为255*C)。该公式也应用于层蒙板,在这种情况下,d代表了蒙板图层中给定位置像素的亮度,下同,不再叙述。
Darken 变暗
B<=A: C=BB>=A: C=A
该模式通过比较上下层像素后取相对较暗的像素作为输出,注意,每个不同的颜色通道的像素都是独立的进行比较,色彩值相对较小的作为输出结果,
下层表示叠放次序位于下面的那个图层,上层表示叠放次序位于上面的那个图层,下同,不再叙述。
Lighten 变亮
B<=A: C=AB>A: C=B
该模式和前面的模式是相似,不同的是取色彩值较大的(也就是较亮的)作为输出结果。
Multiply 相乘
C=A*B
该效果将两层像素的标准色彩值(基于0..1之间)相乘后输出,其效果可以形容成:两个幻灯片叠加在一起然后放映,透射光需要分别通过这两个幻灯片,
从而被削弱了两次。
Screen 滤色
C=1-(1-A)*(1-B)也可以写成 1-C=(1-A)*(1-B)
该模式和上一个模式刚好相反,上下层像素的标准色彩值反相后相乘后输出,输出结果比两者的像素值都将要亮(就好像两台投影机分别对其中一个图层进行
投影后,然后投射到同一个屏幕上)。从第二个公式中我们可以看出,如果两个图层反相后,采用Multiply模式混合,则将和对这两个图层采用Screen模式混合后反相的结果完全一样。
Color Dodge 颜色减淡
C=B/(1-A)
该模式下,上层的亮度决定了下层的暴露程度。如果上层越亮,下层获取的光越多,也就是越亮。如果上层是纯黑色,也就是没有亮度,则根本不会影响下层。
如果上层是纯白色,则下层除了像素为255的地方暴露外,其他地方全部为白色(也就是255,不暴露)。结果最黑的地方不会低于下层的像素值。
Color Burn 颜色加深
C=1-(1-B)/A
该模式和上一个模式刚好相反。如果上层越暗,则下层获取的光越少,如果上层为全黑色,则下层越黑,如果上层为全白色,则根本不会影响下层。结果最亮的地方不会高于下层的像素值。
Linear Dodge 线性减淡
C=A+B
将上下层的色彩值相加。结果将更亮。
Linear Burn 线性加深
C=A+B-1
如果上下层的像素值之和小于255,输出结果将会是纯黑色。如果将上层反相,结果将是纯粹的数学减。
Overlay 叠加
B<=0.5: C=2*A*BB>0.5: C=1-2*(1-A)*(1-B)
依据下层色彩值的不同,该模式可能是Multiply,也可能是Screen模式。
上层决定了下层中间色调偏移的强度。如果上层为50%灰,则结果将完全为下层像素的值。如果上层比50%灰暗,则下层的中间色调的将向暗地方偏移,
如果上层比50%灰亮,则下层的中间色调的将向亮地方偏移。对于上层比50%灰暗,下层中间色调以下的色带变窄(原来为0~2*0.4*0.5,现在为0~2*0.3*0.5),
中间色调以上的色带变宽(原来为2*0.4*0.5~1,现在为2*0.3*0.5~1)。反之亦然。
Hard Light 强光
A<=0.5: C=2*A*BA>0.5: C=1-2*(1-A)*(1-B)
该模式完全相对应于Overlay模式下,两个图层进行次序交换的情况。如过上层的颜色高于50%灰,则下层越亮,反之越暗。
Soft Light 柔光
A<=0.5: C=(2*A-1)*(B-B*B)+BA>0.5: C=(2*A-1)*(sqrt(B)-B)+B
该模式类似上层以Gamma值范围为2.0到0.5的方式来调制下层的色彩值。结果将是一个非常柔和的组合。
Vivid Light 亮光
A<=0.5: C=1-(1-B)/2*AA>0.5: C=B/(2*(1-A))
该模式非常强烈的增加了对比度,特别是在高亮和阴暗处。可以认为是阴暗处应用Color Burn和高亮处应用Color Dodge。
Linear Light 线性光
C=B+2*A-1
相对于前一种模式而言,该模式增加的对比度要弱些。其类似于Linear Burn,只不过是加深了上层的影响力。
Pin Light 点光
B<2*A-1: C=2*A-12*A-1<B<2*A: C=BB>2*A: C=2*A
该模式结果就是导致中间调几乎是不变的下层,但是两边是Darken和Lighte年模式的组合。
Hard Mix 实色混合
A<1-B: C=0A>1-B: C=1
该模式导致了最终结果仅包含6种基本颜色,每个通道要么就是0,要么就是255。
Difference 差值
C=|A-B|
上下层色差的绝对值。该模式主要用于比较两个不同版本的图片。如果两者完全一样,则结果为全黑。
Exclusion 排除
C=A+B-2*A*B
亮的图片区域将导致另一层的反相,很暗的区域则将导致另一层完全没有改变。
Hue 色相
HcScYc =HASBYB
输出图像的色调为上层,饱和度和亮度保持为下层。对于灰色上层,结果为去色的下层。
Saturation 饱和度
HcScYc =HBSAYB
输出图像的饱和度为上层,色调和亮度保持为下层。
Color 颜色
HcScYc =HASAYB
输出图像的亮度为下层,色调和饱和度保持为上层。
Luminosity 亮度
HcScYc =HBSBYA
输出图像的亮度为上层,色调和饱和度保持为下层。
Dissolve 溶解
该模式不是真正的溶解,其表现和Normal类似。其从上层中随机抽取一些像素作为透明,
使其可以看到下层,随着上层透明度越低,可看到的下层区域越多。如果上层完全不透明,则效果和Normal不会有任何不同。
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
Three.js入门教程2 - 着色器(上)
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标... 更多...