直接给文字容器加 backdrop-filter 会导致文字模糊及渲染异常，应使用 ::before 伪元素隔离背景模糊层，主元素单独承载文字并置于其上。
为什么直接给文字加 backdrop-filter 不行
因为 backdrop-filter 作用的是元素「背后」的区域，不是它自己所在的层。如果你直接写 div { backdrop-filter: blur(8px); }，而这个 div 又恰好盖在背景图/色上，看起来是模糊了——但一旦里面放文字，文字也会被模糊影响（尤其在 Safari 中，backdrop-filter 会污染整个 stacking context）。更麻烦的是，Chrome/Firefox 对含文字的容器应用 backdrop-filter 时，可能触发渲染 bug，导致文字边缘发虚、闪烁或抗锯齿异常。
用伪元素隔离背景模糊层
核心思路：把模糊效果严格限制在「纯背景层」，文字放在独立的、无模糊的层上。最稳妥的方式是用 ::before 伪元素画背景，主元素只负责文字内容，并确保两者不共用同一个 stacking context。
关键点：
-
position: relative在父容器上，让伪元素能准确定位 -
::before设为position: absolute+inset: 0，铺满且不占文档流 - 给伪元素加
backdrop-filter: blur(10px)和-webkit-backdrop-filter: blur(10px)（Safari 必须） - 主元素（文字所在）设
position: relative和足够高的z-index（如z-index: 2），确保压在模糊层之上 - 别忘了给伪元素加
background或background-image，否则模糊没东西可作用
.glass-card {
position: relative;
background: rgba(255, 255, 255, 0.1);
}
.glass-card::before {
content: '';
position: absolute;
inset: 0;
background: url('/bg.jpg') center/cover;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 1;
}
.glass-card > * {
position: relative;
z-index: 2;
}
文字清晰但背景模糊失效？检查这三点
常见失效不是代码写错，而是被其他 CSS 隐式破坏：
-
overflow: hidden在父容器上会裁剪伪元素，导致模糊区域不完整——改用overflow: visible或移除 - 父容器有
transform（比如translateZ(0)）、will-change或filter，会创建新的 stacking context，使伪元素的backdrop-filter失效——尽量避免在玻璃态容器上叠加这些属性 - 背景图没加载成功，或
background-color是纯透明（rgba(0,0,0,0)），backdrop-filter就没内容可模糊——测试时先用 solid color 背景确认效果
兼容性与性能提醒
backdrop-filter 在 Chrome 116+、Firefox 119+、Safari 9+ 支持良好，但 iOS Safari 15.4 之前有严重内存泄漏问题；Android WebView 支持不稳定。如果目标用户包含老版本 Safari，建议用 JS 检测：if ('backdropFilter' in document.documentElement.style)， fallback 到半透明白色遮罩。
性能方面，模糊值超过 12px 在低端设备上容易掉帧，尤其配合滚动时。推荐控制在 4px–10px 区间，必要时用 @media (prefers-reduced-motion: reduce) 关闭模糊。
真正难的不是写对那几行 CSS，而是让模糊只作用于该作用的地方，又不拖慢渲染、不干扰文字渲染管线——这点，连很多设计系统都还在反复调参。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
