backdrop-filter 与 filter 的区别：filter 模糊的是元素自身，backdrop-filter 模糊的是元素后面的背景。因此它需要元素带一点透明度（或半透明背景色）才能看到效果——完全不透明的元素背后什么也透不过来。
最典型的用法是顶部吸顶导航：半透明白色底 + backdrop-filter: blur(12px)，页面内容滚到背后时呈现朦胧质感。注意它会显著消耗 GPU 合成性能，滚动密集页面不要大面积叠加多层。
<style> .glass { height: 110px; background: rgba(255,255,255,.55); backdrop-filter: blur(14px); border-radius: 14px; } .stage { background: linear-gradient(45deg,#f778ba,#4a9eff,#39c5cf); padding: 8px; } </style> <div class="stage"><div class="glass">透过我可以看到背后渐变被高斯模糊的样子</div></div>