应使用伪元素::before单独承载并模糊背景图，而非直接对容器设filter: blur()，因其会模糊所有子元素；需设置position: relative、显式声明background-size和z-index: -1，并扩展伪元素尺寸避免裁剪。
直接给背景容器加 filter: blur() 会把文字、按钮、输入框全糊掉——这不是背景模糊，是整页失焦。真要模糊背景图，得用伪元素单独承载并模糊它。
为什么不能直接对容器设 filter: blur()
因为 filter: blur() 作用于元素自身及其全部子树。一旦你给 .hero 或 body 加这个样式，里面所有文字、链接、表单控件都会跟着变糊，完全不可读。
- 常见错误：写
.hero { filter: blur(10px); }，结果标题和按钮都像隔着毛玻璃看不清 - 本质问题：blur 是“画布级”操作，不是“背景层”操作
- 真正需要的，是一个只模糊背景、不碰前景内容的独立图层
::before 伪元素复制背景图的关键写法
用 ::before 创建一层“背景副本”，让它继承或复写父容器背景，并对其单独应用 filter: blur()，再用 z-index: -1 压到内容下方。
- 父容器必须设
position: relative，否则::before的absolute定位会脱标错位 -
::before要显式写background-image: url(...)或background-image: inherit，但后者不继承background-size和background-position，必须重写 - 必须加
top: 0; left: 0; width: 100%; height: 100%才能完整覆盖 -
z-index: -1不可省略，否则伪元素可能被后续文字遮盖（尤其当父容器没设z-index）
.hero {
position: relative;
background: none; /* 关闭自身背景，避免双背景叠加 */
}
.hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
filter: blur(10px);
z-index: -1;
}模糊边缘被裁剪？加点“溢出余量”
当父容器设了 overflow: hidden 或 border-radius，伪元素的模糊光晕会被硬裁切，出现生硬黑边或白边。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：把伪元素扩出去一点，比如
top: -20px; left: -20px; right: -20px; bottom: -20px - 同时父容器加
overflow: hidden来兜底裁剪，确保视觉干净 - 别依赖
background-clip: padding-box，它对模糊无效
性能与兼容性绕不开的坑
大图 + 高值 blur() 在中低端设备上容易掉帧，尤其滚动时；旧版浏览器（如 Chrome 75-、Firefox）压根不支持 backdrop-filter，但伪元素方案至少能 fallback 到静态模糊。
-
blur(12px)是安全上限，再高在非 Retina 屏上文字边缘开始发虚 - 加
will-change: filter到伪元素可提前触发 GPU 合成，但别滥用——只在频繁动画时加 - Safari 对
filter渲染更敏感，若发现模糊偏色，尝试改用background-color: rgba(255,255,255,0.01)强制创建合成层 - 如果父容器用了
transform（比如scale(0.98)），::before可能被裁，此时得把伪元素提到<html>上，用fixed定位
伪元素方案看似多几行 CSS，但它把“模糊”这件事锁死在背景层里，不干扰 DOM 结构、不破坏语义、也不依赖浏览器新特性——只要图能加载，模糊就能生效。最易被忽略的是 background-size 和 z-index 这两个显式声明，少一个，效果就断在半路。
