backdrop-filter没效果的主因是元素不透明且背后无内容：必须设半透明背景（如rgba）并确保父层有可见内容，否则无法取样模糊。
backdrop-filter 能给元素「背后」的内容加滤镜，不是给自身内容，也不是给背景图——这点搞错就全白试了。
backdrop-filter 为什么没效果？常见原因
最常踩的坑是：元素没有「透出背后内容」的条件。它只对半透明或带空隙的区域生效，背后内容还得在同层叠上下文里可见。
-
backdrop-filter需要元素有background-color且透明度 rgba(255,255,255,0.8)），纯transparent或无背景时可能被浏览器忽略 - 父容器不能有
overflow: hidden（会裁剪 backdrop 渲染区域） - 元素不能是根元素（
<html>或<body>），也不支持伪元素（如::before） - Chrome 和 Safari 支持较好，Firefox 默认禁用（需手动开启
layout.css.backdrop-filter.enabled）
如何正确写一个毛玻璃效果（glassmorphism）
典型用法就是半透容器 + 模糊 + 背景色微调，关键在组合顺序和层级控制。
div.glass {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari 必加 */
border-radius: 12px;
padding: 24px;
}-
-webkit-backdrop-filter在 Safari 中必须显式声明，仅写backdrop-filter无效 -
blur()值越大越模糊，但超过 20px 后性能下降明显，移动端慎用 - 别忘了加
border-radius，否则边缘模糊会“漏底”，看起来像贴了半张模糊胶布
backdrop-filter 与 background-image 冲突吗？
不冲突，但要注意渲染优先级：background-image 是元素自身的背景，backdrop-filter 作用的是该元素「背后」的页面内容（比如 body 里的图、文字、其他 div），两者互不影响。
立即学习“前端免费学习笔记（深入）”；
- 如果想让滤镜也作用于某张背景图，得把那张图放在玻璃容器的「下方」元素里（比如用
<body style="background: url(...)...">） - 在玻璃容器上同时设
background-image和backdrop-filter，你会看到：图片在容器内显示，而模糊只发生在容器外侧区域 - 想模拟「带纹理的毛玻璃」？用
background-image: url("noise.png")+background-blend-mode: overlay叠在rgba()上更可控
真正难调的不是语法，而是视觉平衡：模糊太强像失焦，太弱看不出效果；透明度高了藏不住后面文字，低了又不像玻璃。建议在真机上反复测，尤其 iOS Safari 对 blur() 的渲染和内存占用很敏感。
