5分钟学会CSS3:《mix-blend-mode:screen —— 滤色模式》

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。至少有两层叠加才会出效果。例如背景色+图片，图片添加混合模式；两层定位图片，上层图片应用混合模式...。当然也可以多层混合，每层都添加混合模式例如：3原色效果图

还有网上一直流行这张混合模式计算公式：

滤色模式

会ps的人都知道，设计时候也有混合模式，常见的有强光、柔光、正片叠底、滤色等，其实css的混合模式跟ps里面的混合模式一模一样！可以说是，毫无区别！
例如：
PS里面的滤色模式：让白更白，而黑不变！

滤色模式特点

• 1.任何颜色与黑色混合，不会发生改变；
• 2.任何颜色与白色混合，变成白色！
• 3.任何颜色与其他颜色混合，颜色变浅，被白色漂白了；

由于滤色模式有这个特性，那么任何一张图片遇到黑色背景的特效gif都会叠加上特效效果，黑色也不会显示，特效图的黑色也会变透明，这有点像拍电影的“绿布”，效果如下：

效果代码

.box{width: 200px;height: 140px;overflow: hidden;position: relative;}
.box img:last-child{position: absolute;left: 0;top: 0;z-index: 1;transform: scale(2);}
.screen{mix-blend-mode: screen;}

除了img图片可以用滤色之外，video视频也可以应用滤色模式，可以将效果图放置到video下面，video添加滤色模式，效果也会显示出来！效果如下：

以上案例具体效果：

https://course.51qux.com/mix-blend-mode

关于兼容性

移动端完全可以不考虑兼容性，随便跑！唯一的遗憾还是PC端的IE浏览器，估计ie正式退出市场之后，才会全面兼容吧！目前ie占比越来越小，仅剩传统的医疗行业和政府单位还在用着ie这个老浏览器，不过传统行业也不会用到这么新颖的特效技术，哈哈，想用就用！