CSS 中的“毛玻璃”效果

  |   0 评论   |   0 浏览   |   Erioifpud

毛玻璃这种模糊效果在各种应用程序中见得不少,实际上这种显示效果在 CSS 中也能做到,而且可以分成两种类型,分别是元素本身模糊元素背景模糊(指的是被元素覆盖的区域),光是用文字描述可能不太清晰,以下是对比图:

https://s1.ax1x.com/2020/08/26/d2o7Q0.png

可以明显看出左边只有元素的内容部分模糊了,背景是清晰的,而右边元素的内容很清晰,但被元素覆盖的区域模糊了。

使用方式

控制元素内容区模糊的样式是 filter: blur(),让元素覆盖区域模糊的样式是 backdrop-filter: blur(),这两个样式控制着不同的行为,所以两个样式重叠的时候并不会相互覆盖,而且效果叠加:

https://s1.ax1x.com/2020/08/26/d2oozq.png

额外说明

要注意的是,模糊效果并不是 filterbackdrop-filter 带来的(特殊日子使网页变灰的 greyscale 也是通过这两个样式起作用的),起关键作用的是 blur,具体的模糊程度由参数控制,比如 blur(10px)。模糊的效果实际上是通过高斯模糊算法实现的,参数表示的是模糊的半径,算法细节可参考百科

模糊是个比较损耗性能的效果,与动画一起使用时可能会出现肉眼可见的掉帧。


标题:CSS 中的“毛玻璃”效果
作者:Erioifpud
地址:https://blog.doiduoyi.com/articles/1598405054598.html

评论

发表评论