玩过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 。