CSS图层混合(blending)

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

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理