background-blend-mode：CSS实现混合模式叠加——类似Ps图片滤镜效果

css也可以实现图片混合模式滤镜效果，这也是前端实现照片滤镜的原理和方法，在网页ps的滤镜叠加也是用的css滤镜叠加的方法。

滤镜css:

        .bbm-screen{background-blend-mode: screen;/*滤色模式*/}
.bbm-multiply{background-blend-mode: multiply;/*正片叠底模式*/}
.bbm-overlay{background-blend-mode: overlay;/*叠加模式*/}
.bbm-darken{background-blend-mode: darken;/*变暗模式*/}
.bbm-lighten{background-blend-mode: lighten;/*变亮模式*/}
.bbm-colord{background-blend-mode: color-dodge;/*颜色减淡模式*/}
.bbm-saturation{background-blend-mode: saturation;/*饱和度模式*/}
.bbm-color{background-blend-mode: color;/*颜色模式*/}
.bbm-luminosity{background-blend-mode: luminosity;/*亮度模式*/}
.bbm-colorb{background-blend-mode: color-burn;/*颜色加深模式*/}
.bbm-hue{background-blend-mode: hue;/*色相模式*/}
.bbm-hlight{background-blend-mode: hard-light;/*强光模式*/}
.bbm-slight{background-blend-mode: soft-light;/*柔光模式*/}
.bbm-difference{background-blend-mode: difference;/*差值模式*/}
.bbm-exclusion{background-blend-mode: exclusion;/*排除模式*/}

图片css：

.one{width: 150px;height: 150px;float: left;background: url(../img/01.jpg) no-repeat;background-position: center;background-size: cover;background-color: blue;}

我们看一下效果：