前端处理图片--混合模式三、技术介绍：该属性决定了元素内容如何与元素的背景如何混合。（注意：不仅仅是可以在图片上使用）

一、处理效果：

二、主要技术：max-blend-mode（混合模式）属性

三、技术介绍：该属性决定了元素内容如何与元素的背景如何混合。（注意：不仅仅是可以在图片上使用）

可选属性值：
mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原

四、项目源码：

github.com/monaGeju/Bl…

五：参考文章

www.zhangxinxu.com/wordpress/2…

六：拓展：

CSS3提供了背景混合模式，属性基本和上述属性一样，详细的使用效果参见：