一个好玩的css样式mix-blend-mode图像混合

请看效果图

不使用mix-blend-mode的情况下

使用的情况下

别的情况2

黑白效果的实现

注解:

只是在无意中发现的 发现还挺好玩
其实还有别的

后来看了一些文档发现个好玩的解释

你的内容不和背景混合

你的内容和背景混合

也就是属性值

/* Valeurs de type <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;

/* Valeurs globales */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;