在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。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-12*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不会有任何不同。

html图片滤色,CSS3图片混合(Blend)效果详解相关推荐

  1. html5局部放大图片,js实现图片局部放大效果详解

    图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

  2. CSS3 Flex 弹性布局用法详解

    什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...

  3. Android 吸入动画效果详解(仿mac退出效果)

    转载自:http://m.blog.csdn.net/blog/leehong2005/9127095 [转]Android 吸入动画效果详解 1,背景 吸入(Inhale)效果,最初我是在iOS上面 ...

  4. 微投抖的1080_抖出来的算真4K吗?DLP XPR抖动原理及效果详解

    抖出来的算真4K吗?DLP XPR抖动原理及效果详解 2019-03-28 16:17:30 69点赞 137收藏 61评论 相比4K电视的快速普及,4K投影的进度就慢太多了.原生4K家用投影主要是L ...

  5. openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解

    文章目录 1. 写在前面 2. Heatmap 类实现热力图 2.1 Heatmap 参数 2.2 实现热力图 3. 完整代码 4. 添加删除map图层的方法 5. 热力图自身的get,set方法 1 ...

  6. html渐变线条代码,css3线性渐变语法的详解(代码示例)

    本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 线性渐变的完整语法:.demo { background: line ...

  7. 【Axure RP9基础】Axure滑块开关效果详解

    Axure滑块开关效果详解 最终效果:点击切换开.关状态,默认为开的状态: 步骤1:拖动元件[矩形]至画布中,调整形状,填充颜色,去掉边框: 步骤2:拖动元件[圆形]至画布中,调整大小使之直径略小于步 ...

  8. css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享

    一团网资讯 一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16     发布者:来源网络 先给大家一 ...

  9. css3:border-radius圆角边框详解 (变圆 图片)

    转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英 ...

最新文章

  1. sqlserver 参数化查询 允许为null_1+Null 居然等于 Null
  2. 重读ORB_SLAM之Tracking线程难点
  3. C++ 引用通过代码例子理解
  4. 2021年CISCN初赛re
  5. 思科查看服务器启动配置文件,启动配置检查UCS
  6. 《Excel与VBA程序设计》第一章
  7. 【做题记录】 [JLOI2011]不等式组
  8. 信号 09 | 信号概念
  9. .net无刷新验证码
  10. 为什么把钱花在别人身上更幸福?
  11. 整理python笔记001(列表(深浅copy),元祖,字典,集合)
  12. osx mount nfs/smb
  13. Javascript设置对象的ReadOnly属性
  14. tensorflow实战之手写体识别
  15. ecshop二次开发_Logo和版权信息
  16. UDP的单播广播和组播
  17. 《路由器开发 - 路由器刷机指南》小米MINI刷机
  18. Ubuntu18.04将QT应用设计为开机自启
  19. A Game of Thrones(41)
  20. 每日词根——count

热门文章

  1. [软考]项目目标VS项目基准
  2. 端游服务器文件转成手游,苦等三年,当年画面最好的端游终于要做成手游了!...
  3. 报错GENERIC_INTERNAL_ERROR(65536)处理
  4. 微信运动_刷步思路+Python源码+云部署(持续更新)_一蓑烟雨任平生
  5. 初级算法题->有效的数独--弄清哈希表的本质
  6. 论如何通过真值表来求逻辑函数
  7. 论hr面试问题:离职原因
  8. 笔记本电脑蓝牙忽然消失,设备管理器有未知USB设备描述符请求失败
  9. 音诺恒RK3568高性能智能商显安卓广告机主板解决方案
  10. yii之gii的使用