毛玻璃
Backdrop Blur
初级通用毛玻璃（Backdrop Blur）是让浮层背后的页面内容变模糊、同时让浮层保持可见的视觉效果。它能在保留背景轮廓的同时突出前景内容，例如让悬浮导航栏与滚动中的页面区分开。
你可能会说：「我想让顶部导航像半透明玻璃，滚动时还能隐约看到后面的内容，但文字要清楚。」
动手看看资讯页的悬浮导航栏
远方周刊
发现
专题
收藏
城市观察 · 本周精选
沿着海岸线，重新认识这座城
从清晨的码头到夜晚的街角，一起发现熟悉街道里的新风景。
最新故事
一条老街的慢生活街区更新 · 6 分钟阅读
周末去看海旅行灵感 · 4 分钟阅读
藏在巷口的咖啡馆城市地图 · 5 分钟阅读
在页面里滚动，让标题和卡片从导航栏后面经过，再拖动两个滑块。毛玻璃模糊的是导航栏背后的内容，不是导航栏上的文字。
要点毛玻璃是怎么形成的？
- 1
模糊的是背后的内容
你可以把它想成一块盖在页面上的玻璃：透过玻璃看到的图片和文字变模糊，玻璃上的按钮和标题仍然清晰。因为处理的是背后那一层，所以它通常用在浮层上。
- 2
半透明底色决定可读性
只有模糊，背景的颜色和明暗仍可能干扰前景文字。给浮层加一层半透明底色，能让文字更容易辨认；背景越复杂，我们越需要检查不同位置的对比度。
- 3
先想清楚浮层盖住什么
如果导航栏固定在页面顶部，滚动的内容会从它背后经过，毛玻璃的效果就有了来源。如果背后始终是纯色，模糊几乎看不出来，直接用半透明或不透明底色更省事。
容易混淆的地方
毛玻璃模糊的是元素背后的画面，不是把浮层自身的文字、图标一起模糊；后者是元素模糊。它也不等于降低透明度：透明度只让背景透出来，不会抹去背景细节。玻璃拟态则是一整套视觉风格，可能同时使用毛玻璃、描边和阴影。
什么时候用
适合用
- 做吸顶导航栏时，页面内容会从栏下滚过，想保留一点背景感，同时让导航文字保持清晰。
- 做图片详情页的底部操作栏时，背景图片不断变化，想让操作区与图片分开但不完全遮住图片。
- 做覆盖在仪表盘上的临时面板时，想让用户隐约知道面板后面仍是当前页面。
不适合用
- 后台表格的筛选栏始终位于普通页面流中，背后没有内容经过，用实色背景和分割线更直接。
- 登录弹窗需要用户专注填写，且背后内容信息密集，用遮罩压暗背景通常比毛玻璃更明确。
- 页面主体承载长篇文字阅读时，文字区域用稳定的不透明底色，比让背景内容透过来更合适。
练一练选一个答案，看看解释
你在做一个吸顶导航栏。页面滚动后，导航栏会盖在颜色多变的商品图片上；你希望保留图片的轮廓，但导航文字始终清楚。你会怎么做？
让 AI 帮你做复制给 AI Agent 直接用
请给商品详情页的吸顶导航栏做毛玻璃（Backdrop Blur）效果：模糊导航栏背后的滚动内容，保持导航文字和按钮清晰，并加半透明底色。请检查它覆盖亮色、深色图片时的文字对比度；不支持背景模糊时用可读的不透明底色。