mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。它有以下属性值：
normal：正常multiply：正片叠底screen：滤色overlay：叠加darken：变暗lighten：变亮color-dodge：颜色减淡color-burn：颜色加深hard-light：强光soft-light：柔光difference：差值exclusion：排除hue：色相saturation：饱和度color：颜色luminosity：亮度initial：初始inherit：继承unset：复原
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mode{
position: relative;
}
.text{
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background: rgb(108, 124, 15);
font: bolder 100px 'Alfa Slab One';
color: #fff;
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="mode">
<div class="text" :style="{'mix-blend-mode': value}">
CSS<br />mix-blend-mode
</div>
<img src="https://www.dengzhanyong.com/PHP/images/1606961604.jpg" />
</div>
</body>
</html>
正常情况下是这种效果
现在我们来添加mix-blend-mode属性，并为它赋上不同的值看看效果：
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
这里我就不一一的举例了，这个属性在有些时候可以解决一些棘手的样式问题，近期我对个人网站的样式又进行了一些优化，其中有一个波浪的效果。
其实这个就是一张gif图，它的原图其实是这样的
gif不能像png那样看到后面的内容，此时放到项目中的实际效果就是这样。
很显然这与我们想要的效果相差甚远，利用mix-blend-mode可以很好的解决这个问题。设置属性值为 screen ，就可以把黑色区域后面的内容透视上来。
<img class="wave-wrap" src="https://www.dengzhanyong.com/xiaomanju/sources/wave.gif"/>
.wave-wrap {
position absolute
bottom 0
left 0
width 100%
height 100px
mix-blend-mode: screen;
}
在实际使用中，你可能不太了解每个属性值的实际效果什么样，这里建议可以每个值都去试一下，总有一个可以达到你想要的效果。
兼容性
欢迎访问我的个人网站（相信你会喜欢上我的风格）：www.dengzhanyong.com
关注我的个人公众号【前端筱园】，不错过我的每一篇推送
