必须用backdrop-filter而非filter实现毛玻璃效果，因filter会模糊元素自身及内容导致文字不可读，而backdrop-filter仅模糊背后内容、保持前景清晰；需配合半透明背景、背后有真实内容、避免父容器overflow:hidden三条件才能生效。
直接用 filter: blur() 给图片加模糊，得到的不是毛玻璃效果，而是整张图连同文字一起糊掉——这和毛玻璃“只模糊背景、保持前景文字清晰”的核心逻辑完全相反。真正实现毛玻璃效果，必须用 backdrop-filter，而不是 filter。
为什么 filter: blur() 不适合做毛玻璃
filter: blur() 作用在元素自身：它会把图片、文字、边框全部渲染进一个离屏层再模糊，结果就是内容全糊，无法阅读。常见错误写法：
- 给图文容器加
filter: blur(8px)→ 文字也变虚，不可读 - 用
filter: brightness()或contrast()调暗调亮 → 只是调色，不是磨砂感 - 把
filter和backdrop-filter写在同一元素上 → 渲染冲突，部分安卓 WebView 会卡死
正确做法：用 backdrop-filter 实现真毛玻璃
关键在于分层：让文字浮在模糊背景之上，背景来自下层真实内容。基础结构如下：
- 最底层：带背景图或色块的容器（如
body或.bg） - 中间层：半透明卡片（
background-color: rgba(255,255,255,0.15)） - 最上层：文字、按钮等交互内容（不参与模糊）
对应 CSS：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.glass-card {
-webkit-backdrop-filter: blur(8px); /* Safari 必须加前缀 */
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}必须满足的三个生效条件
写了没反应？大概率是以下某一条没到位：
- 卡片背景必须是
rgba()或hsla()等带 alpha 值的颜色，不能是#fff或transparent（Safari 对 transparent 支持不稳定） - 卡片背后必须有“真实可见内容”——比如 body 有 background-image，或父容器设置了背景色/图；纯白页面 + 单个浮层 = 模糊对象为空
- 父容器不能有
overflow: hidden或contain: strict，否则会裁剪模糊采样区域，尤其 Safari 极其敏感
兼容性兜底与降级方案
Firefox 默认禁用 backdrop-filter，旧版 Chrome/Safari 需前缀，微信 X5 内核也不稳定。稳妥做法是用 @supports 双条件检测：
@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px)) {
.glass-card {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.15);
}
}
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background-color: rgba(255, 255, 255, 0.82); /* 提高不透明度保可读性 */
box-shadow: 0 0 24px rgba(255, 255, 255, 0.06);
}
}不支持时，用浅色半透底 + 微光阴影模拟近似质感，比硬塞 filter: blur() 更自然、更可控。
