真正可用的方案只有两个：用::before伪元素隔离模糊层（兼容性好但需手动构造图层）或用backdrop-filter针对背后内容模糊（语义清晰但旧浏览器静默失效）；伪元素必须设z-index:-1且父容器显式设position:relative，否则模糊层会覆盖内容；backdrop-filter需配合半透明背景和真实可模糊的底层内容才能生效。
不能直接给容器加 filter: blur()，否则文字、按钮、输入框全糊掉——这不是背景模糊，是废操作。真正可用的方案只有两个：用 ::before 伪元素隔离模糊层，或用 backdrop-filter 针对背后内容模糊。前者兼容性好但需手动构造图层，后者语义清晰但旧浏览器会静默失效。
为什么伪元素必须设 z-index: -1
伪元素默认和内容同层叠上下文，哪怕你给文字加 z-index: 999，只要父容器没设 position: relative，它就压不住模糊层。常见错误是只写了 position: absolute 却漏掉 z-index: -1，结果文字还是糊的。
- 父容器必须显式设
position: relative，否则::before的absolute定位会往上找最近的定位祖先，可能错位 -
z-index: -1是硬性要求，不是可选；设成0或不设，模糊层就会盖在内容上 - 如果内容本身有
transform（比如scale(1.05)），可能触发新层叠上下文，此时得给内容也加position: relative确保层级可控
background: inherit 在伪元素里到底继承什么
background: inherit 只继承计算后的 background-image、background-position、background-repeat，但不继承 background-size 和 background-color。很多开发者以为写了 inherit 就万事大吉，结果背景拉伸变形或边缘发白。
- 必须显式重写
background-size: cover和background-position: center，否则模糊后容易裁切 - 纯色背景不能靠
inherit，得在伪元素里直接写死，比如background-color: #f0f0f0 - 渐变背景同理，伪元素里要复制完整值：
background: linear-gradient(45deg, #fff, #e0e0e0)
用 backdrop-filter 实现局部清晰时的关键限制
backdrop-filter 不是“给背景加模糊”，而是“让当前元素背后的内容被模糊”。这意味着它依赖真实透出的背景——如果父容器是纯色、或用了 overflow: hidden、或自身有 transform，背后内容就不可见，模糊也就失效。
- 必须配半透明背景：
background-color: rgba(255, 255, 255, 0.7)，完全不透明 = 看不见背后内容 = 模糊无效 - Safari 下必须加
-webkit-backdrop-filter，且border-radius或overflow: hidden不可少，否则模糊会溢出到圆角外 - 父容器若设了
transform: translateZ(0)或will-change: transform，可能创建独立层叠上下文，导致 backdrop-filter 失效
模糊值选多大才不卡又不失真
blur(1px) 和 blur(4px) 渲染开销接近，但 blur(12px) 在低端安卓机上可能掉帧，尤其页面里有多个模糊块时。更隐蔽的问题是：GPU 合成层激增——每个带 filter 的伪元素都会强制创建独立合成层，几十个一起用，performance 面板里 layer count 会明显跳升。
- 日常用
blur(6px)~blur(10px)平衡效果与性能，超过12px要测真机 - 避免对大尺寸背景图（如 2000×1200）直接模糊，先压缩或用
object-fit: cover缩小渲染区域 - 动画场景慎用
transition: filter，优先考虑will-change: filter提前提示浏览器，但别滥用——它本身就会触发合成层
真正容易被忽略的是：伪元素一旦加了 filter: blur()，浏览器就不再把它当普通渲染层处理，而是扔进 GPU 合成队列。页面里十几个卡片都这么搞，内存占用和功耗会上升，尤其在移动端续航敏感场景下，得盯住 performance 面板里的 layer count 和 memory usage。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
