开始了解CSS混合模式

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

本文由韩聪根据Shwetank Dixit的《Getting to know CSS Blend Modes》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明原作者相关信息http://dev.opera.com/articles/getting-to-know-css-blend-modes/

——作者:Shwetank Dixit

——译者:韩聪

CSS混合模式提供了一种用于规定层与层之间如何相互影响及混合的方法。迄今为止,这属于图片编辑应用软件领域,但现在开始,这种混合模式可以通过CSS在web中实现!

什么是CSS混合模式

如果你曾经广泛地使用过图片编辑应用软件(例如,Adobe Photoshop,Pixelmator,GIMP等),那么你可能对混合模式比较熟悉。如同名称中所暗示的,混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式,你会看到不同的融合后的效果。

这些混合模式,现已 Compositing and Blending Level 1说明文档被添加在CSS中。混合模式被用来指定一个特定的颜色将如何融合到背景层的颜色中。其结果可能十分有趣。

混合模式的工作方式

混合模式主要是一组不同的方式,这些方式用来确定当一个元素与另一个(部分或完全地)重叠时,图像的最终色彩应该是怎样的。本质上,这些模式就是源层和背景层颜色用数学表达的函数——例如RGBA,其中所有通道的值都在0和1之间——每一个特定的像素返回一个最终的数学值,最终确定该像素的颜色。每个混合模式用来确定颜色所使用的精确公式可以参考规范。现在,我们就来看看CSS中提供的不同混合模式分别产生了什么样的效果。

CSS中不同的混合模式的效果

正常模式(Normal)

开始了解CSS混合模式

通过Normal混合模式产生的图像不会添加任何可视效果,即使用时用当前图层像素的颜色覆盖下层颜色。

正片叠底模式(Multiply)

开始了解CSS混合模式

正如其名称所暗示的,multiply 混合模式将源图像和背景图像的颜色相乘,从而获得最终的颜色。这通常会导致图像变暗。

屏幕模式/滤色(Screen)

开始了解CSS混合模式

与正片叠底模式相反,合成图层的效果是显现两图层中较高的灰阶,而较低的灰阶则不显现(即浅色出现,深色不出现),产生一幅更加明亮的图像。

叠加模式(Overlay)

开始了解CSS混合模式

overlay混和模式既有screen中的像素颜色变浅效果,也有multiply中的像素颜色加深效果。反应在实际应用中就是:使浅的更浅,深的更深。究竟使用何种模式,取决于底层的色彩,合成后有些区域图变暗有些区域变亮。

变暗模式(Darken)

开始了解CSS混合模式

此模式的效果取决于源和背景颜色之间更深的(色彩),即混合两图层像素的颜色时,对这二者的RGB值(即RGB通道中的颜色亮度值)分别进行比较,取二者中低的值再组合成为混合后的颜色。

变亮模式(Lighten)

开始了解CSS混合模式

这个模式与darken相反,它的效果取决于源和背景颜色之间更浅的(色彩)。即将两像素的RGB值进行比较后,取高值成为混合后的颜色,因而总的颜色灰度级升高,造成变亮的效果。

颜色减淡(Color-Dodge)

开始了解CSS混合模式

Color-Dodge模式加亮了背景颜色,从而形成鲜明对比的图像。

颜色加深(Color-Burn)

开始了解CSS混合模式

这种模式加深了背景色,并且增加了源和背景色彩的对比度。即让底层的颜色变暗,有点类似于正片叠底,但不同的是,它会根据叠加的像素颜色相应增加底层的对比度。

强光模式(Hard-Light)

开始了解CSS混合模式

这种模式与overlay相反。它在较浅的像素上使用multiply模式,而在较深的像素上使用screen模式。作用效果如同是打上一层色调强烈的光,所以称之为强光。

柔光模式(Soft-Light)

开始了解CSS混合模式

这种模式在较深像素上使用multiply模式,而在较浅像素上使用screen模式。与overlay有些相似,但有轻微的不同。作用效果如同是打上一层色调柔和的光,因而被我们称之为柔光。作用时将上层图像以柔光的方式施加到下层。

色相/色调模式(Hue)

开始了解CSS混合模式

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/getting-to-know-css-blend-modes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部