背景过滤器：模糊（）不起作用

Question

尝试应用背景滤镜来对另一个元素后面的元素实现模糊效果。但是，浏览器无法应用此效果。浏览器是Chrome。

检查员：

关于如何让它发挥作用有什么技巧吗？

提前致谢。

Answer 1

backdrop-filter

目前在 Chrome 中由“启用实验性 Web 平台功能”标志保护，在 Safari 中前缀为

-webkit-backdrop-filter

。除非最终用户配置了该标志，否则它将无法工作。

Answer 2

我发现具有透明背景的元素会被错误地模糊。因此，请确保您的页面不透明。就我而言，添加这个就像魅力一样。

body {
    background-color: white;
}

希望有帮助:)

Answer 3

我有同样的问题，但我的情况有所不同。我有两个元素，第二个元素是第一个元素的子元素（这是因为菜单层次结构）。基于 ol>li 和 div 块的元素。第二个元素在悬停时下降。这两个元素都有背景过滤器，并且它对于第一个元素效果很好，但是当悬停事件触发并且第二个元素下拉时，它只需要背景属性，背景过滤器不起作用（我可以在开发工具中看到背景过滤器属性并且它没有被划掉）。我只是卡住了，非常感谢您的任何建议。