Page 128 - css揭秘

试一试 play.csssecrets.io/color-tint

向 Dudley Storey（http://demosthenes.info）脱帽致敬，感谢他提出了混
合模式的动画技巧（http://demosthenes.info/blog/888/Create-Monochromatic-

Color-Tinted-Images-With-CSS-blend）。
致 敬
„ 滤镜效果
http://w3.org/TR/filter-effects 相关规范
„ 图像混合效果
http://w3.org/TR/compositing

„ CSS 过渡
http://w3.org/TR/css-transitions

18 毛玻璃效果

背景知识

RGBA/HSLA 颜色

难题

半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其
1①
他花哨的背层 之上，可以减少对比度，确保文本的可读性。这种效果确实很
有视觉冲击力，但仍然可能导致文字很难阅读，特别是当不透明度较低或背
层图案太过花哨时。举个例子，我们来看看图 4-14，图中 main 元素的背景

① 我们在这里用了“背层”（backdrop）一词，它表示页面被某个上层元素遮住的部分，这部分
区域透过该上层元素的半透明背景显现出来。

18 毛玻璃效果 97

඀ࠡ JOEC