应使用 backdrop-filter 实现背景模糊而文字清晰，因 filter 会模糊整个容器及子元素；backdrop-filter 仅模糊背后内容，需配合半透明背景、-webkit 前缀及 border-radius 才能正常生效。
为什么文字跟着背景一起糊了
因为用了 filter: blur() 作用在整块容器上——它会把元素自身和所有子节点（包括文字、按钮、图标）当成一张图来模糊。这不是背景模糊，是“整个盒子糊成一团”。
真正要的效果是：背后的内容（比如父容器的图片）变虚，而当前元素里的文字保持锐利。这只能靠 backdrop-filter，不是 filter。
-
backdrop-filter只影响“元素背后透过来的画面”，文字天然不受影响 -
filter是对“当前元素及其全部后代”整体渲染后模糊，文字必然变糊 - 误用
filter后想救文字，只能拆 DOM 层级，徒增复杂度和维护成本
backdrop-filter 基础写法与必要条件
它不是设上就生效的属性，漏掉任一条件都会白屏或无效果。
- 父容器必须有可被模糊的内容：比如
body或外层section设了background-image - 当前元素必须带半透明背景：
background-color: rgba(255,255,255,0.7)，纯色（rgb）或不透明会挡住背后内容 - 必须加
-webkit-backdrop-filter前缀，Safari 15.4+ 才支持无前缀版本 - 强烈建议加
border-radius或overflow: hidden，否则模糊边缘在 Safari 中容易溢出、发灰
典型代码：
立即学习“前端免费学习笔记（深入）”；
.glass-card {
background-color: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 16px;
}
旧浏览器 fallback：伪元素模拟模糊层
Chrome 75-、Firefox backdrop-filter，它会静默失效。这时得手动造一层“已模糊的背景副本”。
核心是用 ::before 复制父容器背景，并单独模糊：
- 父容器设
position: relative，并清空自身背景：background: none -
::before中显式重写background-image、background-size: cover、background-position: center - 不能只靠
background: inherit，很多属性伪元素无法继承 -
z-index: -1确保它在内容之下，且不干扰交互
示例片段：
.fallback-bg {
position: relative;
background: none;
}
.fallback-bg::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url("bg.jpg");
background-size: cover;
background-position: center;
filter: blur(8px);
z-index: -1;
}
blur 值调多大才不卡、不溢出
模糊不是越大越好。实测中，超过 12px 就开始在中低端 Android 和部分 iOS 设备上掉帧；16px 以上在滚动或 hover 动画中极易卡顿。
- 推荐区间是
6px–12px，兼顾质感与性能 - 边缘发白/发灰？优先微调
background-color的 alpha 值（如从0.7改为0.55），比减小blur更有效 - 避免在
position: fixed元素上滥用，视口滚动时会高频重绘模糊区域 - Safari 对
video或iframe作为背景时支持不稳定，遇到直接切回伪元素方案
最常被忽略的一点：Firefox 默认可能禁用 backdrop-filter，尤其在 Linux 或企业环境，用户看不到效果时先检查 about:config 中 layout.css.backdrop-filter.enabled 是否为 true。
