当前标签 / 混合模式 / 总共1篇

CSS 背景混合模式

混合模式

现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式,喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解,我们先来普及一下什么是图像的混合模式。

要理解混合模式需要理解,图层、通道、RGB模式原理。

图层 比较好理解,就是我们的图像通过一层一层的叠加,最终形成我们所看到的图像,换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。

颜色通道

上面显示的是 RGB 通道, 每个通道的像素都代表这种种颜色从 0~255 之间的一个值,三个通道叠加就会形成这个图像,而 alpha 通道是一个虚拟通道,比如我们可以创建一个选区来生成一个 alpha 通道。

alpha 通道

RGB模式 RGB是光色三原色,通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

目前的显示器大都是采用了 RGB 颜色标准,在显示器上,是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的,目前的电脑一般都能显示32位颜色,有一千万种以上的颜色。如下图所示,假设三个灯都不开就是 0x000000 (黑色),只开红灯就是 0xff0000 (红色),三个灯都开就是 0xffffff (白色), rgb 三个值为等值的时候如 0x666666 是灰值(没有色相),RGB 模式称之为加色模式(相加成白色)。

RGB模式叠加示意图

CSS 中的混合模式是通过 background-blend-modemix-blend-mode 实现的。

阅读更多