CSS3 background-blend-mode和mix-blend-mode的强大之处

两者均为混合模式,把背景图片和颜色混合处理,两者的参数相同
在一个background设置多个背景图,或者设置背景图和背景色,然后调用混合模式

各个参数产生特效

mix-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;

参考:
MDN:mix-blend-mode
MDN:background-blend-mode

你可能感兴趣的:(CSS)