如何用CSS实现弹窗背景模糊效果backdrop-filter？

backdrop-filter生效需同时满足三条件：弹窗背景必须半透明（如rgba）、背后必须有真实可模糊内容、Safari需加-webkit前缀；纯色背景、父容器空白或缺前缀任一即失效。

backdrop-filter 要生效，弹窗本身必须有半透明背景，且背后得有真实内容可模糊——纯色背景、父容器空白、没加浏览器前缀，这三样占一样就直接失效。

为什么写了 backdrop-filter: blur(10px) 却没效果

最常见原因是背景不透：比如写了 background: #fff 或 background: white，这种 100% 不透明背景会把背后内容完全盖住，backdrop-filter 根本没东西可糊。

1. 必须用 rgba() 或 hsla()，例如 background: rgba(255, 255, 255, 0.8)
2. 如果用了 background-image，也要确保它没被不透明背景层挡住
3. 检查弹窗是否被父级 overflow: hidden 裁掉模糊区域——临时加 overflow: visible 排查
4. 别和 filter 混用：filter: blur() 是糊自己，backdrop-filter 才是糊背后

Safari 和 Firefox 兼容性怎么写才不翻车

Safari（包括 iOS）至今仍强制要求 -webkit-backdrop-filter，只写标准属性等于白写；Firefox 当前版本（v120+）默认禁用该特性，靠用户手动开启不现实，所以不能当作核心功能依赖。

1. 必须同时写两行：-webkit-backdrop-filter: blur(10px) 和 backdrop-filter: blur(10px)
2. 用 @supports 做渐进增强，别用 JS 动态加 class，否则页面会闪一下
3. 兜底样式里把透明度调高点，比如 background: rgba(255, 255, 255, 0.92)，避免 Firefox 下文字被背景干扰

性能卡顿或模糊被裁剪的典型诱因

模糊是 GPU 渲染操作，不是 CPU 算出来的，但触发条件很敏感。很多“效果突然消失”其实是渲染层被意外隔离了。

1. transform、will-change、position: fixed 都可能创建新层叠上下文，导致背后内容不可见——加 isolation: isolate 试试
2. 别在 body 或滚动容器上直接用，优先限定在弹窗、卡片等小尺寸浮动元素内
3. 远程桌面、某些企业浏览器策略、甚至 Chrome 的硬件加速开关关闭时，backdrop-filter 会静默失效，控制台无报错
4. 如果弹窗用 z-index 太低，模糊效果可能被其他内容盖住，至少设成 z-index: 1000

真正难搞的不是写法，而是调试时你根本看不到任何错误提示——它只是安静地不工作。每次怀疑失效，先盯住背景色、再查 Safari 前缀、最后看背后有没有内容可糊，这三步走完，90% 的问题就定位到了。