backdrop-filter 失效时，用伪元素 + filter 是常见 fallback，因为 backdrop-filter 在 Firefox 102 之前、所有 IE/Edge ≤17、部分旧版 Safari（如 Safari 15.4 之前）中不支持或需前缀，而伪元素方案通过 ::before 复制背景并应用 filter: blur() 实现兼容性良好的“假毛玻璃”效果。
backdrop-filter 失效时，为什么用伪元素 + filter 是常见 fallback
因为 backdrop-filter 在 Firefox 102 之前、所有 IE/Edge ≤17、部分旧版 Safari（filter: blur() 虽然会模糊整个元素，但配合伪元素定位，能「模拟」出只模糊背景的视觉效果。关键不是真实 backdrop，而是让模糊图层严格处于内容之下、真实背景之上。
这个方案不依赖浏览器对 backdrop 的支持，兼容性覆盖到 IE9+，但代价是：模糊图层无法随滚动/缩放实时更新，必须提前准备静态图或用 JS 截图生成。
::before 伪元素怎么设置才不会盖住文字或失效
伪元素必须满足三层堆叠关系：真实背景 → 模糊伪元素（::before）→ 清晰内容。否则要么糊不到、要么把文字一起糊掉。
- 给容器设
position: relative，否则::before会相对于 body 定位，容易错位 -
::before必须有content: ""、position: absolute、inset: 0（或top:0; left:0; width:100%; height:100%） - 必须显式设
z-index: -1，确保它在内容之下；若父容器有overflow: hidden，伪元素可能被裁剪，需额外加contain: layout paint - 别给伪元素设
background-color或纯色填充——那会遮住模糊效果；它只能靠background-image+filter: blur()双重作用
filter: blur() 加在伪元素上，为什么数值不能随便调大
filter: blur() 是高开销操作，尤其在伪元素上叠加模糊再渲染，会触发全层重绘。iOS Safari 和低端 Android 设备上，blur(12px) 就可能引起滚动卡顿或闪烁。
立即学习“前端免费学习笔记（深入）”；
- 建议模糊值控制在
blur(4px)～blur(8px)之间，视觉上已有明显虚化，性能也较稳 - 避免和
transform、opacity动画同时作用于同一伪元素，否则某些 Chrome 版本会跳过硬件加速 - 如果容器宽高动态变化（比如响应式弹窗），伪元素的
background-size: cover必须配合background-position: center，否则模糊图拉伸变形，边缘出现锯齿
如何让伪元素模糊图自动适配不同屏幕尺寸
静态图片 fallback 最难搞的就是响应式——一张 blur-bg.jpg 在 4K 屏上糊成马赛克，在手机上又太清晰。真正可用的解法只有两个：
- 用 SVG 作为伪元素背景：
background-image: url("data:image/svg+xml,...")，内联模糊滤镜定义，无分辨率限制，但仅适合纯色渐变类背景 - 放弃图片，改用 CSS 渐变 + 多层
box-shadow模拟柔焦：比如background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); box-shadow: 0 0 60px 30px rgba(255,255,255,0.15)，性能好、缩放无损，但质感不如真模糊 - 如果必须用图片，就生成三套：small（1200px），通过
@media切换background-image，别指望一张图撑全场
最常被忽略的一点：伪元素的 filter 不会继承父容器的 transform: scale()，所以用 Zoom 缩放页面时，模糊程度会失真——这不是 bug，是规范行为。
