CSS 中的“毛玻璃”效果
毛玻璃这种模糊效果在各种应用程序中见得不少,实际上这种显示效果在 CSS 中也能做到,而且可以分成两种类型,分别是元素本身模糊与元素背景模糊(指的是被元素覆盖的区域),光是用文字描述可能不太清晰,以下是对比图:
可以明显看出左边只有元素的内容部分模糊了,背景是清晰的,而右边元素的内容很清晰,但被元素覆盖的区域模糊了。
使用方式
控制元素内容区模糊的样式是 filter: blur()
,让元素覆盖区域模糊的样式是 backdrop-filter: blur()
,这两个样式控制着不同的行为,所以两个样式重叠的时候并不会相互覆盖,而且效果叠加:
额外说明
要注意的是,模糊效果并不是 filter
与 backdrop-filter
带来的(特殊日子使网页变灰的 greyscale
也是通过这两个样式起作用的),起关键作用的是 blur
,具体的模糊程度由参数控制,比如 blur(10px)
。模糊的效果实际上是通过高斯模糊算法实现的,参数表示的是模糊的半径,算法细节可参考百科。
模糊是个比较损耗性能的效果,与动画一起使用时可能会出现肉眼可见的掉帧。