CSS3图片混合(Blend)效果详解

2019-09-13 郑州网站建设  

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2067.html转载请标明出处,谢谢合作!
标签:
  • 软件
  • photoshop
  • Ч
  • CSS3Blend