background-blend-mode 属性用于控制背景图像和背景颜色之间的混合模式。它可以用于创建复杂的背景效果，通过将不同的背景层混合在一起。

该属性的值可以是以下之一：

1. normal： 默认值，没有混合效果，背景图像覆盖在背景颜色之上。
    background-blend-mode: normal;

2. multiply： 使用 Multiply 模式混合背景图像和背景颜色。这会使颜色变暗。
    background-blend-mode: multiply;

3. screen： 使用 Screen 模式混合背景图像和背景颜色。这会使颜色变亮。
    background-blend-mode: screen;

4. overlay： 使用 Overlay 模式混合背景图像和背景颜色。
    background-blend-mode: overlay;

5. darken： 使用 Darken 模式混合背景图像和背景颜色，结果颜色取两者中的较暗者。
    background-blend-mode: darken;

6. lighten： 使用 Lighten 模式混合背景图像和背景颜色，结果颜色取两者中的较亮者。
    background-blend-mode: lighten;

这些混合模式允许开发者创建丰富多彩的背景效果，特别是在使用多个背景层时。例如：
.element {
  background-image: url('background.jpg');
  background-color: #ff0000;
  background-blend-mode: multiply;
}

上述代码将一个背景图像和一个红色背景颜色混合在一起，使用 Multiply 模式，使颜色变暗。


转载请注明出处：http://www.pingtaimeng.com/article/detail/5992/CSS