backdrop-filter是唯一正解，filter作用于元素自身导致内容失焦，background不参与模糊计算；必须用rgba透明背景+父容器真实背景图才能实现背后模糊效果。
backdrop-filter 是唯一正解，filter 和 background 混合无效
直接说结论：backdrop-filter 才能实现真正的“背后模糊”，而 filter: blur() 作用于元素自身（含内容和背景），background 本身不参与模糊计算。把 filter 和 background 叠在一起写，只会让整个卡片变糊，背景图不会“透出+模糊”，而是被强行套上一层全局模糊——这不是磨砂感，是失焦。
为什么 backdrop-filter 能生效，关键在层叠上下文和透明背景
要让 backdrop-filter 正常工作，必须同时满足两个条件：
-
background不能是纯色不透明值，得用rgba(255,255,255,0.2)或transparent；设成#fff或white会完全遮挡背后内容，blur 就没东西可模糊 - 卡片父容器必须有真实背景（图片、渐变、固定背景），且不能被中间层截断；常见错误是给卡片加了
overflow: hidden或设置了z-index隔离了层叠上下文 - Safari 必须加
-webkit-backdrop-filter，否则直接失效；Firefox 目前仍不支持该属性（截至 2026 年 4 月）
background-image + backdrop-filter 的实际配合要点
很多人想用 background 做纹理叠加，但要注意：CSS 不支持对 background-image 单独做 backdrop 模糊。真正起作用的永远是“卡片背后那一整块渲染区域”——所以你要控制的是整个页面或容器的背景，而不是卡片自己的 background。
- 推荐做法：在
body或根容器上设置background-image，并加background-attachment: fixed锁定滚动位移，避免模糊区域随滚动错位 - 卡片自身只负责
background: rgba(255,255,255,0.25)+backdrop-filter: blur(10px)，别试图在background里塞url()或linear-gradient - 如果非要叠加纹理，可用伪元素
::before在卡片内部叠一层半透明蒙版，但注意它不属于 backdrop 区域，不会被模糊
blur 参数与视觉平衡的实操经验
模糊半径不是越大越好，它直接影响性能和可读性：
立即学习“前端免费学习笔记（深入）”；
-
blur(4px)～blur(8px)：适合文字密集型卡片（如登录表单），保持背景可辨但不过度干扰 -
blur(10px)～blur(16px)：主流推荐区间，配合saturate(1.2)可提升背景对比度，避免发灰（例如：backdrop-filter: blur(12px) saturate(1.3)） - 超过
blur(20px)在低端设备易卡顿，且 Safari 可能触发渲染降级；Chrome 中开启will-change: transform也无实质改善 - 深色模式下建议降低透明度（如
rgba(30,30,46,0.35)），否则模糊后背景容易“吃掉”文字
最易被忽略的一点：blur 效果依赖 GPU 加速，若卡片被包裹在 transform: translateZ(0) 或 will-change: opacity 的祖先节点里，某些 Chrome 版本会意外禁用 backdrop-filter 渲染——遇到这种情况，优先检查父级是否无意中创建了合成层。
