【问题标题】:CSS backdrop-filter not working as expectedCSS背景过滤器未按预期工作
【发布时间】:2026-01-18 12:35:01
【问题描述】:

我们成功地将backdrop-filter 应用到我们的导航栏。但是在导航栏折叠的移动设备上,我们显示的是传统的下拉导航菜单。当将过滤器应用到下拉菜单div 时,它会忽略模糊并且根本不显示它。奇怪的是,如果我们关闭导航栏本身的模糊,它就会起作用。这是问题的截图:

请注意,该网站已上线。请访问socialkit.com 进行进一步调查。

【问题讨论】:

  • 请我们解决这个问题,因为我有完全相同的问题,即使在 Chrome 的开发工具中将模糊关闭标题时它也能奇迹般地工作。移动导航元素嵌套在标题中,所以我也尝试将移动导航父级的背景过滤器设置为“无”,看看这是否有帮助......它没有。如果有帮助,我的网站是一个 Wordpress 网站。

标签: html css filter webkit


【解决方案1】:

这是 Chrome 中的一个错误,https://bugs.chromium.org/p/chromium/issues/detail?id=993971 检查这篇文章,他们建议了一个解决方法backdrop-filter not working for nested elements in Chrome

【讨论】: