background-blend-mode属性用于定义一个元素的各个背景图层的混合模式。

通过background-blend-mode属性你可以将一个元素的各个背景图层或背景颜色进行混合。允许你指定元素如何混合合成在一起，并改变图像相交区域的颜色。每一种模式都使用特定的颜色方案来混合源和目标的颜色。

每一个背景层都会和它下面的背景层进行混合，但是如果两个背景层不重叠，它们之间不会有混合效果。

如果一个元素有多个背景层，并且你通过逗号来为各个背景层指定了不同的混合模式，那么background-blend-mode属性中的各个值会以相同的顺序被应用到各个背景图像上。也就是说，background-blend-mode属性中的第一个值会被应用到background-image属性的第一幅图像上（这个背景层是最上面的图层）。

混合模式应该按background-image CSS属性同样的顺序定义。如果background-blend-mode属性的值和背景层的数量不匹配，浏览器的user agent会根据实际情况来计算出所需要的混合模式的数量，它会被截取至相等的数量。

如果一个元素的背景样式使用了background的简写方式，那么该元素的background-blend-mode属性会被重置为初始值。

官方语法

background-blend-mode: <blend-mode>                              
                            

参数值：

参数定义元素背景层混合的模式，可以有多个值，用逗号间隔。可用的取值如下：

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

background-blend-mode属性的初始值为normal。

例如下面代码的书写格式都是正确的：

/* 单个值 */
background-blend-mode: normal;

/* 多个值 */
background-blend-mode: darken, luminosity;

/* 全局值 */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;                              
                            

下面的代码使用元素的背景图像和背景颜色进行混合，混合的模式为overlay（叠加模式）。

.element {
    background-image: url(forest.jpg);
    background-color: #1e824c;
    background-blend-mode: overlay;
}                              
                            

上面的代码会得到类似下面的结果：

你还可以将2张或更多的图片进行混合处理，同时为每一个背景层使用不同的混合模式。例如下面的例子使用上面的图片和一个背景渐变进行混合，使用的混合模式还是overlay。

.element{
  background-image: linear-gradient(to right, #69B62F, #DE3375),url(img/forest.jpg);
  background-blend-mode: overlay;
}                              
                            

上面的代码会得到类似下面的结果：

如果你有2个背景图像，你可以先将这两张图像进行混合，再将混合的结果与背景颜色进行混合。

.element{
  background-image: url(img/wood.jpg),url(img/forest.jpg);
  background-blend-mode: hard-light;
}                              
                            

上面的代码会得到类似下面的结果：

适用范围

background-blend-mode属性可以使用在所有HTML元素上。在SVG中，它可以应用在容器元素、图形元素和图形引用元素上。

在线演示

下面的例子中演示了元素背景图像和背景色进行混合的16种不同的取值情况：

浏览器支持

完整的兼容性列表可以查看：