今天要说的是 其是一中 css 数据类型，用于描述当前元素重叠时，颜色应当如何呈现。它被用于 background-blend-mode 和 mix-blend-mode 属性。

当层重叠时，例如：同一元素设置多个背景图、父子元素的重叠。这时混合模式就是计算像素最终颜色值的方法。

background-blend-mode 属性

该属性主要用于设置背景的混合模式，我们都知道背景颜色其实可以设置多个图片，或者多个图片加上单个纯颜色值，而这些图片与颜色值其实是层叠在一起的，通过这个属性我们可以将它们进行不同方式的融合，呈现出其他的颜色。

1
2
3
4
5
6
7
8
9
10
.box{
    width: 400px;
    height: 400px;
    border: 1px solid pink;
    background: 200px 19px/200px url("./meinv.jpg") no-repeat, 0px/ cover url("./bg.jpg") pink;
    background-blend-mode: darken;
    /*mix-blend-mode: normal;*/
    font-size: 30px;
    font-weight: 700;
}

效果如下图：

image-20200829190933929

该属性是是一种更接近于 ps 能力的工具，需要相关专业的知识才能够好的进行调试，具体取值可以参考这里。

mix-blend-mode 属性

该属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

使用该属性我们一般需要一种嵌套关系，我们可以将该属性设置在子元素上生成混合效果，具体取值可以参考这里。