我们在对图片进行色彩处理时，通常会用ps里的蒙版加色彩模式（如图），我们可以通过下拉去选择不同的模式种类，从而形成一张图片的不同效果。而如今随着css3的发展，这种只有在软件中的色彩模式也被应用到了css3的属性中，即background-blend-mode。

不如，先来看下demo： background-blend-mode的演示。你可以在底部切换不同的背景色来查看之间的差异。

定义与用法

从字面上理解，我们可以知道background-blend-mode就是背景混合模式。我们在给元素设置背景后，按如下添加颜色模式：

background-blend-mode: value;

需要注意的是，倘若你只给元素添加背景图，而没有加背景色的话，即便你设置了background-blend-mode，也不会看到有任何变化。毕竟它是背景图与背景色的混合作用 ，不同的背景色，会产生不同的效果，当然采用多背景也可以看到效果。

value的取值有16种，因此在文章开头的demo中，我们才看到图片不同模式下的效果。这16种模式分别是：normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。下表列出了各模式的信息：

属性 描述
normal 正常模式
multiply 正片叠底模式
screen 屏幕模式/滤色
overlay 叠加模式
darken 变暗模式
lighten 变亮模式
color-dodge 颜色减淡
color-burn 颜色加深
hard-light 强光模式
soft-light 柔光模式
difference 差值/差异模式
exclusion 排除模式
hue 色相/色调模式
saturation 饱和度模式
color 颜色模式
luminosity 亮度/明度模式

兼容性

因为background-blend-modecss3属于css3的新特性，自然支持它的都是现代浏览器，尽管如此，但作为一个知识储备还是不错的。其兼容性具体可查看caniuse，http://caniuse.com/#search=css-backgroundblendmode