有趣的颜色混合模式——mix-blend-mode mix-blend-mode 最近又发现了一个很有意思的css-属性

mix-blend-mode

最近又发现了一个很有意思的css-属性 ———— mix-blend-mode。

按字面意思看可以叫做混合模式。如果你是一个有ps使用经验的码农，那就不难理解这个概念。css的混合模式和ps混合模式都是一个概念的东西，也就是多个图层叠在一起时，要怎么处理相交的部分，我们可以用混合模式，将多个元素巧妙地组合在一起。

用法

混合模式共有16个类型，这里不一一介绍他们的原理。

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;