css - Blending Modes

混合模式（Blend modes）是一种在图形设计和图像编辑中常用的技术，可以通过将两个或多个图层的像素颜色混合在一起来创建不同的视觉效果。

在混合模式中，每个像素都由两个或多个图层的对应像素的颜色值组成。通过将这些颜色值进行数学计算，可以创建出一系列不同的效果。混合模式的计算基于所选混合模式的算法，以及每个像素的透明度值。不同的混合模式可以产生不同的视觉效果，如颜色叠加、柔光、变暗等。

以下是一些常见的混合模式：

• 正常（Normal）：两个图层的像素颜色直接叠加。
• 变暗（Darken）：将两个图层的像素颜色的较暗的颜色作为输出结果。
• 变亮（Lighten）：将两个图层的像素颜色的较亮的颜色作为输出结果。
• 滤色（Screen）：将两个图层的像素颜色取反，并相乘再取反。
• 叠加（Overlay）：根据底层像素的颜色强度来调整顶层像素的颜色值，产生更加复杂的视觉效果。
• 柔光（Soft light）：根据底层像素的颜色值来调整顶层像素的亮度和饱和度，产生柔和的光照效果。
• 差值（Difference）：将两个图层的像素颜色的差值作为输出结果。

混合模式通常用于图像处理和图形设计中，例如调整图片的颜色和对比度、创建复杂的图形效果、以及制作特殊效果。在 CSS 中，混合模式也可以用于控制背景图像和元素之间的混合效果。