CSS中的background-blend-mode（背景混合模式）属性定义了元素的多个背景之间如何互相混合。

使用background-blend-mode，你就可以实现在一个元素上混合多个背景层（图片或者颜色）。

该属性的值可以是一个或者多个的<blend-mode>（混合模式）。混合模式让你可以指定混合的背景，从而改变背景交叉区域的颜色。使用特定颜色公式来混合基色和目标色。

混合模式应该按background-image属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

语法

1
background-blend-mode: <blend-mode>
1
2
3
4
5
6
7
8
9
/* 单值 */
background-blend-mode: normal;

/* 双值，每个背景一个值 */
background-blend-mode: darken, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

值

一个<blend-mode>定义混合的模式，可以有多个值，用逗号间隔。

示例

在luminosity混合模式中，可以创建单色的背景效果。

下面的例子使用了luminosity作为background-blend-mode的值，使背景图片和背景颜色混合，让图片“失色”。查看原图

1
2
3
4
5
.el-1{
    background-image: url(https://st-qn.gittt.cn/2015/09/11/1.jpg);
    background-color: #000;
    background-blend-mode: luminosity;
}

效果如下：

同样，您可以混合两个或多个重合在一起的图像，让他们重合在一起。

下例的background-image有两个值：一张图片以及一个线性的背景，然后使用overlay这个混合模式来进行混合。

1
2
3
4
.el-2 {
    background-image: linear-gradient(to bottom, #f00, #0f0), url(https://st-qn.gittt.cn/2015/09/11/1.jpg);
    background-blend-mode: overlay;
}

效果如下：

如果你有两张背景图，你也可以把这两张图片混合在一起：图1 图2

1
2
3
4
5
.el-3 {
    background-image: url(https://st-qn.gittt.cn/2015/09/11/1.jpg), url(https://st-qn.gittt.cn/2015/09/11/2.jpg);
    background-color: olive;
    background-blend-mode: color-burn;
}

使用不同混合模式，就好呈现出不用的效果。

规范

《Compositing and blending Level 1 background-blend-mode》

浏览器兼容性

参考资料