css3 图片颜色叠加--background-blend-mode

先创建一个DIV：<div class="mul"></div> 

给这DIV添加背景颜色和背景图片：

.mul{
    margin: 0 auto;
    border: solid 1px red;
    width: 400px;
    height: 500px;
    background: #5bd5a0 url("su1.jpg") no-repeat center center/60% auto;
}

现在我只用混合样式：

.mul{
    margin: 0 auto;
    border: solid 1px red;
    width: 400px;
    height: 500px;
    background: #5bd5a0 url("su1.jpg") no-repeat center center/60% auto;
    background-blend-mode: multiply;
}

混合模式有：

Multiply 正片叠底

Screen 滤色

Overlay 叠加

Darken 变暗

Lighten 变亮

Color dodge 颜色减淡

Color burn 颜色加深

Hard light 强光模式

Soft light 柔光模式

Difference 差值模式

Exclusion 排除模式

Hue 色相模式

Saturation 饱和度模式

Color 颜色模式

Luminosity 亮度模式

具体每一个的效果可以参考：http://www.webhek.com/css-blend-mode/

然后自己需要用的时候，可以在PS里先把自己想到模式找出来，再找到对应的样式来使用。