用伪元素::before实现仅背景模糊：设content:""、absolute定位并z-index:-1，父容器需relative；backdrop-filter语义更准但兼容性差，IE不支持filter且安卓WebView有闪烁风险。
background-blur 不能直接用 background-filter
CSS 没有 background-filter 这个属性，想让「背景图」变模糊，不能只给容器加 filter: blur()——那样会把整个元素（包括子内容）一起糊掉。真需求其实是：只模糊背后那层图，上面的文字、按钮保持清晰。
用伪元素 + absolute 实现「仅背景模糊」
核心思路是把模糊层抽成独立的 ::before，用 position: absolute 压在底层，再通过 z-index 确保它不遮挡内容。关键点不在「覆盖全屏」，而在「尺寸对齐父容器且不干扰流式布局」：
-
position: absolute必须配合top: 0; left: 0; width: 100%; height: 100%，不能只靠inset: 0（IE 不支持） - 伪元素需设
content: ""，否则不渲染 - 父容器必须有
position: relative（或其它非static值），否则absolute会相对于 viewport 定位 - 模糊值建议控制在
blur(4px)以内，超过 8px 在低端设备上易卡顿
div.bg-blur {
position: relative;
background: #000;
}
div.bg-blur::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url(bg.jpg) center/cover;
filter: blur(6px);
z-index: -1;
}
filter: blur() 的兼容性坑
filter: blur() 在 Safari 9+、Chrome 53+、Firefox 35+ 支持良好，但有两个硬限制：
- IE 完全不支持，连
-webkit-filter都无效，必须降级为纯色或静态毛玻璃图 - 当父容器有
transform（比如scale(0.99)或translateZ(0)），某些安卓 WebView 会失效或闪烁 -
blur()值为0px时，部分旧版 Chrome 仍会触发硬件加速，导致意外重绘
替代方案：backdrop-filter 更干净但支持更窄
如果目标是「透过当前元素看背后内容并模糊」（比如弹窗、导航栏），backdrop-filter: blur(10px) 才是语义正确的解法。但它只在 macOS Safari、Chrome 115+、Edge 117+ 中稳定可用，iOS Safari 要求 -webkit-backdrop-filter 且需开启「减少透明度」系统设置才生效。
立即学习“前端免费学习笔记（深入）”；
用错场景反而更麻烦：比如给整页 加 backdrop-filter，实际什么也糊不到——因为背后没「可透过的层」。
真正容易被忽略的是：模糊层和内容层之间不能有半透明遮罩（如 rgba(0,0,0,0.3)），否则 backdrop-filter 会把那层也当成「背后内容」一起模糊，结果变成双重模糊+灰蒙蒙。
