毛玻璃Backdrop Blur
你可能会说
导航栏做成半透明的，后面的内容滚过去时模模糊糊。
毛玻璃是一种通过模糊元素背后画面，让半透明界面层与背景区分开的视觉效果用 backdrop-filter: blur() 可以让悬浮导航或弹窗保留背景轮廓，同时仍与页面内容分开。元素背景必须有透明度才能看见模糊；它可能增加渲染开销并降低文字对比度，因此不要把它铺在大段正文上，还要准备不支持该属性时仍清楚可读的纯色背景。
先知道
什么时候用
- 吸顶 顶部导航栏 Navbar：内容从底下滚过，若隐若现导航 · 毛玻璃
- 浮层与对话框：和下层保持联系，又分得清前后对话框 · 毛玻璃浮层
- 配图区的信息卡：风景图上盖一张玻璃卡
- 配半透明底色：rgba 白 / 黑加 blur，一对搭档
什么时候不用
- 背景使用不透明纯色：backdrop-filter 无法呈现底层内容背景写了纯白，blur 白写了不透明背景 = 毛玻璃完全不生效
- 大面积内容使用重度模糊：可能影响性能与可读性整页内容罩一层重模糊大面积重度模糊，又卡又看不清
- 底色过透、模糊过轻：正文与背景对比度不足背景透明度过高且模糊不足时，正文会与背景互相干扰。先保证文字对比度和可读性
- 移动端叠加多层模糊：可能降低低性能设备的流畅度
组成结构 · Anatomy
+blur(12px)+rgba 白 55%=
元素身后的东西：图片、渐变、滚动的页面
backdrop-filter 的模糊半径，越大越看不清
没有它 blur 不生效，还顺手托住文字对比度
三者叠加的最终效果：若隐若现、层次分明
常见变体 · Variants
浅色玻璃Light
浅色玻璃
背景较亮、仍能保持文字对比度时
深色玻璃Dark
深色玻璃
深色底图或夜间模式界面
强模糊Strong
强模糊
弹窗背后要更强隔离感
典型使用场景
吸顶毛玻璃导航
雨后的大理古城
3.2 万阅读 · 486 收藏
环洱海骑行一日路线
1.8 万阅读 · 302 收藏
旅记
首页
目的地
我的
风景图上的玻璃卡片
山居民宿 · 云顶
海拔 1,200 米，推开窗就是云海
¥ 688 / 晚
可订
对话框与浮层
退出前保存修改？
「首页改版 v2」还有未保存的改动
深色模式玻璃面板
不才 · 我的三体
⏮▶⏭
延伸阅读 · 权威出处