前端

毛玻璃Backdrop Blur

你可能会说

导航栏做成半透明的，后面的内容滚过去时模模糊糊。

毛玻璃是一种通过模糊元素背后画面，让半透明界面层与背景区分开的视觉效果用 backdrop-filter: blur() 可以让悬浮导航或弹窗保留背景轮廓，同时仍与页面内容分开。元素背景必须有透明度才能看见模糊；它可能增加渲染开销并降低文字对比度，因此不要把它铺在大段正文上，还要准备不支持该属性时仍清楚可读的纯色背景。

山居民宿 · 云顶

海拔 1,200 米，推开窗就是云海。

backdrop-filter: blur(12px)

组成结构 · Anatomy

+blur(12px)+rgba 白 55%=毛玻璃卡

元素身后的东西：图片、渐变、滚动的页面

backdrop-filter 的模糊半径，越大越看不清

没有它 blur 不生效，还顺手托住文字对比度

三者叠加的最终效果：若隐若现、层次分明

常见变体 · Variants

浅色玻璃Light

浅色玻璃

背景较亮、仍能保持文字对比度时

深色玻璃Dark

深色玻璃

深色底图或夜间模式界面

强模糊Strong

强模糊

弹窗背后要更强隔离感

典型使用场景

吸顶毛玻璃导航

雨后的大理古城

3.2 万阅读 · 486 收藏

环洱海骑行一日路线

1.8 万阅读 · 302 收藏

旅记首页目的地我的

风景图上的玻璃卡片

山居民宿 · 云顶

海拔 1,200 米，推开窗就是云海

¥ 688 / 晚可订

对话框与浮层

退出前保存修改？

「首页改版 v2」还有未保存的改动

深色模式玻璃面板

夜航星 (Night Voyager)

不才 · 我的三体

⏮▶⏭