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;

我遇到的问题是需要给整体加上一个带颜色的滤镜 

加之前之后效果

代码 

    background: #0a2a43;
    mix-blend-mode: color;

随便玩玩其他属性

multiply        正片叠底

 screen 滤色

overlay 叠加