CSS3 -- mix-blend-mode属性详解

一：简介

在上篇文章中，我们利用css的mix-blend-mode属性做了一个简单的文字颜色自适应背景颜色的效果，这篇文章我来解释一下这个属性的用法以及一些简单的案例。

二：介绍

mix-blend-mode 是一种 CSS 属性，它定义了一个元素的颜色如何与其父元素的颜色以及兄弟元素的颜色混合。它允许您创建令人惊艳的视觉效果，可以用于创建半透明效果、添加阴影、制作图片蒙版和很多其他效果。

具体来说，mix-blend-mode 定义了两个元素之间的颜色混合模式。该属性接受许多不同的值，接下来我会逐个介绍。

normal

默认值。使用正常的颜色混合模式。

multiply

将两个颜色的值相乘，得到一个更暗的颜色。这通常用于创建阴影效果。

screen

将两个颜色的值相加，然后减去相乘的值，得到一个更亮的颜色。这通常用于创建高光效果。

overlay

根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗，则使用 multiply 模式；如果背景颜色较亮，则使用 screen 模式。

darken

将两个颜色的值比较，使用较暗的那个颜色。

lighten

将两个颜色的值比较，使用较亮的那个颜色。

color-dodge

将前景色分解为 RGB 分量，并将每个分量分别除以（1 减去背景色的对应分量）。然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。

color-burn

将前景色分解为 RGB 分量，并将每个分量分别除以背景色的对应分量。然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。

difference

将前景色减去背景色的值，并取绝对值。这会导致一个反相的效果。

exclusion

将前景色和背景色的值相加，然后减去相乘的值的两倍。这通常用于创建反相效果。

hue

将前景色的色相（Hue）与背景色的饱和度（Saturation）和亮度（Lightness）混合。这可以用于在不改变亮度和饱和度的情况下改变颜色。

saturation

将前景色的饱和度与背景色的色相和亮度混合。这可以用于在不改变颜色的情况下改变饱和度。

color

将前景色的色相、饱和度和亮度与背景色混合。这可以用于在改变所有颜色属性的情况下改变前景色的颜色。

luminosity

将前景色的亮度与背景色的色相和饱和度混合。这可以用于在不改变颜色的情况下改变亮度。

mix-blend-mode

属性可以应用于任何具有背景颜色或背景图像的元素，包括文本、图像和 SVG 图形。通常情况下，您会将 mix-blend-mode 应用于子元素，使其与父元素或其他兄弟元素混合。

三：注意

在混合模式中，元素的颜色值可以是任何一种表示颜色的方式，包括十六进制值、RGB值、RGBA值等。当进行混合计算时，CSS会将两个元素的颜色值转换成标准的RGBA表示方式，并根据混合模式算法对这两个颜色值进行计算，最终生成一个新的RGBA颜色值。

混合模式中的算法涉及到了数学计算，不同的算法使用不同的计算公式。以 multiply 算法为例，它的计算公式是将两个颜色值的每个通道（即红、绿、蓝、透明度四个通道）分别相乘，得到新的颜色值的每个通道。

rgb(255,255,0)与一个rgb(0,255,0)相加

两个颜色值相加通常是通过混合模式中的color算法实现的。这个算法将两个颜色值的每个通道（即红、绿、蓝三个通道）进行相加，然后将结果截取到最大值255以内，得到新的颜色值的每个通道。如果通道相加的结果超过了255，则将结果截取到255。因为每个通道的值都在0-255之间，所以相加的结果也应该在这个范围内。

因此，将rgb(255, 255, 0)与rgb(0, 255, 0)相加的结果为rgb(255, 255, 0)，因为红色通道相加为255，绿色通道相加为255，蓝色通道相加为0，符合上述算法。

rgb(255,255,0)与一个rgb(0,255,0)相乘

两个颜色值相乘通常是通过混合模式中的multiply算法实现的。这个算法将两个颜色值的每个通道（即红、绿、蓝三个通道）进行相乘，然后将结果除以255，得到新的颜色值的每个通道。如果通道相乘的结果超过了255，则将结果除以255后截取到1以内。

因此，将rgb(255, 255, 0)与rgb(0, 255, 0)相乘的结果为rgb(0, 255, 0)，因为红色通道相乘为0，绿色通道相乘为255，蓝色通道相乘为0，符合上述算法。

四：案例

以下用几个简单的例子来用一下比较常用的属性值

1. mix-blend-mode: multiply;

此属性值会将两个图层的颜色值相乘，产生一种暗色调的效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n background-color: #000000;\n mix-blend-mode: multiply;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和颜色会与子元素的背景图进行相乘，产生一种暗色调的效果。

2. mix-blend-mode: screen;

此属性值会将两个图层的颜色值进行屏幕混合，产生一种亮色调的效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n background-color: #ffffff;\n mix-blend-mode: screen;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和颜色会与子元素的背景图进行屏幕混合，产生一种亮色调的效果。

3.mix-blend-mode: overlay;

此属性值会将两个图层进行叠加混合，产生一种高亮度的效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n background-color: #ffffff;\n mix-blend-mode: overlay;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和颜色会与子元素的背景图进行叠加混合，产生一种高亮度的效果。

4.mix-blend-mode: difference;

此属性值会将两个图层的颜色值进行差值计算，产生一种反色效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: difference;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和子元素的背景图进行差值计算，产生一种反色效果。

5.mix-blend-mode: hue;

此属性值会将两个图层的色相进行混合，产生一种颜色平衡的效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: hue;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和子元素的背景图进行色相混合，产生一种颜色平衡的效果。

6.mix-blend-mode: luminosity;

此属性值会将两个图层的亮度进行混合，产生一种亮度平衡的效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: luminosity;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和子元素的背景图进行亮度混合，产生一种亮度平衡的效果。

7.mix-blend-mode: color-dodge;

此属性值会将两个图层的颜色值进行颜色减淡计算，产生一种颜色亮度较高的效果。以下是一个简单的例子：

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: color-dodge;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中，父元素的背景图和子元素的背景图进行颜色减淡计算，产生一种颜色亮度较高的效果。

参考：CSS3 -- mix-blend-mode属性详解