不能直接给容器加 filter: blur()，因为该属性会作用于元素及其整个层叠上下文，使所有子元素一同模糊；伪元素方案通过 absolute 定位、z-index: -1 和 background: inherit（或显式背景）分离模糊层与内容层。
为什么不能直接给容器加 filter: blur()
直接在包含文字或子元素的父容器上设置 filter: blur(5px)，整个元素树（包括所有子节点）都会被模糊——这是 CSS 的渲染规则：filter 会作用于该元素及其整个层叠上下文。哪怕你给子元素设 z-index: 999 或 transform: translateZ(0)，也无法绕过这个继承行为。
伪元素方案的核心三步
用 ::before 或 ::after 创建一个“视觉背景层”，让它承载模糊效果，同时不干扰内容流：
- 父容器必须设
position: relative，为伪元素提供定位基准 - 伪元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，确保完全覆盖 - 关键：伪元素加
z-index: -1，把它压到内容下方；同时确保内容本身没有z-index: auto导致层叠失效（必要时给内容加position: relative）
background: inherit 和图片路径怎么填
如果想模糊的是父容器的背景图，伪元素里用 background: inherit 最稳妥——它会复制父元素计算后的 background-image、size、position 等值。但注意：inherit 不继承 background-color（透明色除外），所以纯色背景要手动写死。
若背景是具体图片路径，直接写进伪元素：
立即学习“前端免费学习笔记（深入）”；
.box::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url('../img/bg.jpg') no-repeat center/cover;
filter: blur(6px);
z-index: -1;
}
常见坑：background-size: cover 在模糊后可能产生边缘裁切，建议搭配 background-position: center 并预留 10–15% 溢出空间。
性能与兼容性要盯住这两点
filter: blur() 在大量元素或高频动画中容易掉帧，尤其在低端移动设备上。不是所有模糊值都等价：
-
blur(1px)和blur(2px)性能差异不大，但blur(8px)渲染成本可能翻倍 - Safari 15.4+ 和 Chrome 100+ 对 backdrop-filter 支持良好，但伪元素 + filter 方案在 IE 完全不可用，Firefox 旧版本对
background: inherit模糊支持不稳定
真正容易被忽略的是：伪元素一旦设了 filter，浏览器就会强制为其创建独立合成层（compositing layer），如果页面里堆了几十个这样的伪元素，GPU 内存占用会明显上升——别只盯着视觉效果，得看 performance 面板里的 layer count。
