filter: blur() 在 IE 和 Edge 16 以下完全不支持，Chrome 53+、Firefox 35+ 才稳定支持；需用 @supports 检测并配合伪元素分层实现兼容性模糊背景，同时控制模糊半径≤8px以保障性能。
filter: blur() 在老浏览器里直接失效
IE 和 Edge 16 以下不支持 filter，连 filter: blur(2px) 都会被整个忽略——不是模糊得不够，是压根不解析。Chrome 53+、Firefox 35+ 才开始稳定支持，但用户若用旧版企业内网环境，很可能看到的是原始锐利图片，毫无模糊效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别指望
filter单独撑全场，必须准备视觉降级方案 - 用
@supports (filter: blur(1px))做特性检测，而不是靠 UA 判断浏览器版本 - 模糊背景图时，
filter作用在容器上，不是<img>标签本身（否则会把整个图片内容模糊，包括上面的文字）
backdrop-filter 对背景图根本不起作用
backdrop-filter 只对「背后的穿透内容」生效，比如半透明卡片下的网页背景；但它无法模糊一个 background-image，因为背景图不属于“背后元素”，而是当前元素的绘制层。很多人试了 backdrop-filter: blur(4px) 发现没反应，就是卡在这个认知偏差上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想模糊背景图，只能走
filter+ 容器分层：用伪元素或额外<div>承载背景图，再对其应用filter -
backdrop-filter的 fallback 必须另起一套逻辑，不能和filter混用同一套 DOM 结构 - Safari 9–13.1 需加
-webkit-backdrop-filter，且只在 position: fixed 或 backdrop-filter 区域有渲染上下文时才生效
用伪元素实现兼容性模糊背景的最小结构
核心思路是把模糊逻辑从主内容层抽离，避免影响文字清晰度，同时让老浏览器自然回退到无模糊的纯背景图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主容器设
position: relative，内部放一个::before伪元素承载背景 - 伪元素设
background-image、filter: blur(6px)，并用z-index: -1确保在底层 - 老浏览器无视
filter，就当普通背景图用；新浏览器则叠加模糊 - 注意伪元素要设
content: ""和显式宽高（如top: 0; left: 0; right: 0; bottom: 0;），否则不渲染
div.bg-blur {
position: relative;
}
div.bg-blur::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("bg.jpg");
background-size: cover;
filter: blur(6px);
z-index: -1;
}
性能与内存容易被忽视的坑
模糊是高开销操作，尤其在滚动或动画中反复触发重绘。iOS Safari 甚至会对 filter: blur() 强制启用 GPU 渲染，导致低端设备内存飙升、页面卡顿或直接崩溃。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 模糊半径别超过
8px，超过后视觉提升极小，但性能下降陡增 - 避免在
:hover或@keyframes中动态改变blur()值，会触发频繁重绘 - 如果背景图尺寸远大于容器（比如 4000px 宽大图缩放到 300px 宽展示），先用 ImageMagick 或 Sharp 预处理成合适尺寸再上线，否则浏览器要实时缩放+模糊，双重压力
- 部分安卓 WebView（如微信 X5 内核）对
filter支持不稳定，建议加will-change: filter提前提示渲染层，但仅限必要时使用
