CSS3图片混合(Blend)效果及其参考计算公式一览表

techbrood 发表于 2016-06-15 12:15:03

标签: css3, blend, photoshop

- +

在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不会有任何不同。

possitive(15) views12816 comments1

发送私信

最新评论

jan 2016-10-14 11:17:07

受教,以前实现起来好困难


请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • 更多...