玩过PS的童鞋应该都知道混合模式(Blending Mode)吧,出现的地方很多,比如修复用的刷子(Healing Brush Tool)、图章(Stamp Tool)、橡皮擦(Eraser Tool)、水滴(Blur Tool)等工具中都有这个选项。但印象最深的恐怕还是在图层面版中,因此以“图层混合模式”统称——本质上都是两个图层的混合。

而这一特性也有望在不久的将来通过CSS属性“blend-mode”在浏览器中得以实现。

下面举两个使用场景

一是让按钮上文字的纹理与背景图一致;

二可以让文字阴影与背景颜色相协调,从而让投影效果更加自然。

 

blending属性使用方法:

元素 CSS 关键词
盒子模型中的文字或子元素 foreground-blend-mode
文字阴影 text-shadow-blend-mode
背景图 background-blend-mode
盒子模型阴影 box-shadow-blend-mode
盒子模型自身 blend-mode

目前还没有浏览器支持该属性,想尝鲜的童鞋得下载Adobe自建版Chromium 。