backdrop-filter 是实现模糊背景最简方案，需父容器设背景图、子容器设透明背景和 blur，并加 border-radius 防溢出；旧版浏览器可用伪元素 fallback。
用 backdrop-filter 实现最简模糊背景
现代浏览器（Chrome 76+、Firefox 103+、Safari 9+）直接支持 backdrop-filter，它是实现「背景图片模糊」最轻量、最语义化的方式——不需额外容器、不破坏 DOM 结构、不触发重排。
关键点：它只对「元素背后的内容」做滤镜，所以必须让背景可透，且背后有可被模糊的内容（比如父容器的 background-image）。
- 给父容器设背景图：
background-image: url(...); background-size: cover; - 子容器加透明背景 + 模糊：
background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); - 必须设
border-radius或overflow: hidden才能防止模糊溢出（尤其在 Safari 中）
兼容性 fallback：用伪元素模拟模糊层
当需要支持旧版 Chrome（backdrop-filter 会静默失效。此时得手动构造一层「已模糊的背景副本」。
核心思路：用 ::before 伪元素复制父容器背景图，对其应用 filter: blur()，再用 z-index 压到内容下方。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
position: relative;，并关闭自身背景：background: none; - 伪元素里写：
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: inherit; filter: blur(10px); z-index: -1; - 注意：伪元素无法继承
background-size等属性，必须显式重写：background-size: cover; background-position: center; - 如果父容器背景是渐变或纯色，就不用伪元素——直接在伪元素里写死
background: linear-gradient(...)再加filter
filter vs backdrop-filter 的根本区别
别混用这两个 API：它们作用对象完全不同，错误使用会导致白屏、卡顿或完全没效果。
-
filter: blur(10px)是「把当前元素及其所有子元素整体当成一张图来模糊」，文字、按钮全糊掉，不适合做背景模糊 -
backdrop-filter: blur(10px)是「只模糊当前元素背后的画面」，文字保持清晰，这才是你要的效果 - 若误对整个卡片容器加
filter，又想保留文字清晰，只能拆 DOM：把文字提到模糊层外，结构变复杂且易错 - Safari 对
backdrop-filter在iframe或video背景上支持不稳定，遇到就切回伪元素方案
性能与移动端避坑要点
高斯模糊是耗性能的操作，尤其在低端 Android 或 iOS 上容易掉帧。不是加个 blur(12px) 就完事。
- 模糊半径建议 ≤ 12px；超过 16px 在部分安卓机上会明显卡顿
- 避免在滚动容器（
overflow: scroll）内使用backdrop-filter，iOS Safari 会强制降帧 - 用
will-change: backdrop-filter可能引发渲染异常，不推荐；真要优化，优先保证父背景图尺寸合理（≤ 2000px 宽） - 微信内置浏览器（X5 内核）至今不支持
backdrop-filter，检测方法：if ('backdropFilter' in document.documentElement.style) { ... }，不通过就走伪元素 fallback
backdrop-filter，什么时候必须退回到伪元素」——这取决于你的最低支持版本和是否允许 JS 检测。 
