必须分层实现背景模糊：伪元素方案用::before单独承载并模糊背景图，z-index:-1确保置于内容下方；backdrop-filter方案需三层结构（背景层+半透遮罩层+内容层），且遮罩层须有alpha值和border-radius。
直接用 background-image + background-size: cover 实现全屏背景，再叠加模糊效果——但必须拆成两层：一层承载原图，一层单独模糊，否则文字和交互元素会跟着糊掉。
为什么不能对 body 直接加 filter: blur()
因为 filter: blur() 作用于整个元素及其所有子树。你给 body 加了这个样式，页面上所有文字、按钮、输入框都会变糊，根本不可读。这不是“背景模糊”，是整页失焦。浏览器不会区分“背景”和“内容”，它只认 DOM 树层级。
- 常见错误写法：
body { filter: blur(8px); }→ 标题、导航栏、表单全糊 - 真正需要的是一个独立的、仅承载背景图的图层，且能被精准控制层级
- 这个图层必须和内容分离，不能共享同一个渲染上下文
用 ::before 伪元素实现兼容性模糊背景
这是目前最稳妥、兼容到 IE11 的方案：用伪元素复制背景图，单独模糊，并压到内容下方。
- 父容器（如
body或.hero）必须设position: relative，否则::before的absolute定位会脱标错位 -
::before要显式写top: 0; left: 0; right: 0; bottom: 0，确保覆盖完整视口 -
background-image: url(...)不能靠inherit—— 它不继承background-size和background-position，必须重写background-size: cover和background-position: center -
z-index: -1是硬性要求，漏掉就会盖住文字；设成0或不设，模糊层仍在内容上方
body {
position: relative;
margin: 0;
height: 100vh;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
filter: blur(10px);
z-index: -1;
}
用 backdrop-filter 实现现代毛玻璃效果（推荐用于新项目）
如果目标环境支持（Chrome 76+、Firefox 103+、Safari 9+、iOS Safari 全支持），backdrop-filter 是语义最清晰、代码最轻量的方案——但它不是“给背景加模糊”，而是“让当前元素背后的内容被模糊”，所以结构必须满足三层：
立即学习“前端免费学习笔记（深入）”；
- 底层：带
background-image的容器（如.hero） - 中层：半透明遮罩容器（如
.glass-panel），必须带 alpha 值，例如background-color: rgba(255, 255, 255, 0.7) - 上层：文字、按钮等清晰内容（不参与模糊）
- 必须加
border-radius或overflow: hidden，否则 Safari 会溢出模糊光晕，出现生硬白边 - Safari 必须加
-webkit-backdrop-filter，且不能和transform或will-change冲突
.hero {
background-image: url('bg.jpg');
background-size: cover;
height: 100vh;
}
.glass-panel {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 8px;
padding: 2rem;
}
响应式与高清屏适配的关键细节
全屏模糊背景在 4K 屏、MacBook Pro 或 Windows 高缩放显示器上容易发虚，问题不在 CSS，而在物理像素未对齐设备像素比（window.devicePixelRatio）。图片本身需提前准备高分辨率版本，并通过媒体查询或 image-set() 切换。
- 背景图优先用媒体查询兜底：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)单独加载@2x图 -
image-set()在 Safari ≤15.6 中静默失效，不能作为唯一方案 - 模糊值别超过
12px，数值越大，边缘光晕越重，裁剪风险越高 - 移动端真机调试时，若容器含
overflow: scroll或-webkit-overflow-scrolling: touch，backdrop-filter可能闪烁或失效
最容易被忽略的点是：伪元素模糊方案里，background-size 和 background-position 必须显式重写，不能依赖 inherit；而 backdrop-filter 方案里，“背后有内容可模糊”这个前提常被遗忘——比如给纯色背景的 div 加 backdrop-filter，它什么也不会模糊。
