css混合模式之background-blend-mode

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

ps色彩模式

不如,先来看下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

评论功能已关闭。