css颜色混合模式——mix-blend-mode

130 阅读1分钟
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;           // 复原

镂空文字实现

渐变文字实现

拓展一下 background-blend-mode,对图像之间要进行混合,同时还要和背景色进行混合。

background-blend-mode 实现丰富CSS的背景纹理