css属性mix-blend-mode介绍

介绍

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

具体属性值

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

2. multiply
   将两个颜色的值相乘，得到一个更暗的颜色。这通常用于创建阴影效果。
   原效果如下:
   

   使用multiply后
   

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

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

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

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

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

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

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

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

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

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

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