# css 实现毛玻璃效果

# 快速导航

# 方法 1-filter 模糊元素自身

原理: 通过对元素本身进行模糊处理,从而实现毛玻璃效果

实现比较简单,对需要模糊的dom设置CSS属性

滑动滑块-高斯模糊-实现毛玻璃效果

# 方法 2-::before+filter 叠加图片模糊

原理:

这种实现其实是一种伪毛玻璃效果,仅适用于模糊图片背景的场景。思路是在需要做毛玻璃效果的区域,对伪元素::after::before设置同背景图片相同的背景,并对其做模糊处理

结合背景图片叠加+伪类实现毛玻璃效果

提示

使用图片叠加实现毛玻璃效果:模糊效果不能影响字体,采用了伪元素::after::before

需要注意的是,当 background-attachment: fixed 属性设置时,该元素的背景图大小和定位是依据其向上查找的第一个属性为 overflow: auto 的父元素。 使背景图片滚动时,模糊部分图片也会随之滚动

# 方法 3-使用 CSS backdrop-filter 属性实现

原理:使用 CSS 属性backdrop-filter可实现真·毛玻璃效果

# 三者比较

实现方式 优点 缺点
filter 代码简洁 使用灵活,可以在任意元素上使用 不能实现图片局部模,若 blur 的值过大,会导致模糊元素边缘呈现背景颜色,可能不是理想效果糊
::before+filter 可以实现图片局部模糊 只能实现图片或其他相对不变元素的毛玻璃效果,灵活度较差
backdrop-filter 实现真正的毛玻璃效果 兼容问题需要考虑,IE 就不用考虑了的

# 相关文档

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐