熟悉Photoshop的朋友一定知道视口之间的混合模式。 使用混合模式，您可以在图像上实现不同的效果。 当然，这里我不会和大家讲Photoshop，而是讲CSS3的混合模式。
混合模式：指用于将下图像混合到上图像中的各种模式。 根据您选择的模式，您会看到不同的融合效果。
在CSS3中，有两个与混合模式相关的属性：mix-blend-mode和background-blend-mode。
那么，这两个属性有什么作用呢？
可以实现背景与背景的混合、背景与文字的混合、背景与底色的混合等，我们来看看这三种效果：
1.混合混合模式
默认情况下，mix-blend-mode 将混合低于堆叠顺序的所有元素。 它应用于多个元素，除了背景之外，元素内的其他内容（例如文本）也会被混合。 也可以这样理解，它将当前元素与其下面任何重叠的背景或元素混合在一起。
一般有元素与元素的混合、元素与背景色的混合、元素与背景图像的混合等。
语法：
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
注意：如果源没有与背景颜色或背景图像混合，则必须保证两个元素保持级联关系（可以理解为重叠关系）。
我们来看看不同值之间的功效：
混合模式公式可以在这里看到：
如果您使用 mix-blend-mode，它会将当前元素与其下方的任何重叠背景元素混合。 如果希望与当前元素重叠的元素不受混合模式的影响，应该如何设置呢？
我们可以使用isolation属性，该属性主要用于设置源是否与其他元素隔离。
语法：
isolation: auto | isolate
auto 是默认值，这意味着元素不是孤立的。 如果想让一个元素与其他元素隔离，需要将其属性值设置为isolate。
用法：
.isolation{
isolation:isolate;
}
看一个例子：
//第二幅图
//第三幅图
渲染：
2. 背景混合模式
background-blend-mode 指的是背景的混合模式。 它可以是背景图像之间的混合，或者背景图像和背景颜色的混合。
语法：
background-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属性设置为正片叠底：
div{
background-image:url(https://imagecloud.laixiazheteng.com/t_example_girl.jpg);
background-color:#0062CC;
background-blend-mode: multiply;
}
我们来看看不同数值的治疗效果：
通过前面的效果图，我们发现当mix-blend-mode和background-blend-mode设置相同的参数时，效果是一样的，但是请注意css3 混合css3 混合，mix-blend-mode作用于多个元素，而background-blend-模式适用于背景和背景或背景和背景颜色。
background-blend-mode 还支持多种背景混合：
//背景与渐变色
.mode1 .mm{
background:radial-gradient(red,blue),url(https://imagecloud.laixiazheteng.com/t_example_girl.jpg);
background-blend-mode: screen,multiply;
}
//背景与背景
.mode2 .mm{
background:url(https://imagecloud.laixiazheteng.com/t_example_girl.jpg),url(https://imagecloud.laixiazheteng.com/t_leaf.jpg);
background-blend-mode: screen,multiply;
}
渲染：
3.画布混合模式
如果了解canvas的话，应该知道canvas还支持混合模式，即通过设置globalCompositeOperation属性来选择使用哪种混合模式。 我这里就不谈这个了。 您可以阅读另一篇文章：Canvas入门基础（六）：构图与剪裁
混合模式简述混合模式的本质是分别取前景和背景（参与混合的两个视口）的像素点，然后利用它们的颜色值进行物理运算，得到新的颜色值。颜色值。 重叠区域中的每个像素都会经历这个估计过程。
不同参数的公式算法可以在这里看到：
兼容性
(1)混合混合模式
(2) 背景混合模式
我刚刚了解了这两个参数。 如有错误，还请见谅！
