CSS 有选择地模糊元素

Question

我正在尝试通过使用模糊滤镜(例如， -webkit-filter: blur(10px);.当我像这样将模糊应用到特定元素时效果很好:

body.modal_open #main { -webkit-filter: blur(10px); }

但是，如果我的模态弹出窗口在#main 中，过滤器也会应用到该元素，正如您所期望的那样。

我的问题是，有没有办法告诉浏览器不要将过滤器应用于特定元素？我尝试添加:

body.modal_open .modal_window { -webkit-filter: blur(0px); }

但这没有用。有没有办法根据元素的 z-index 或类似的东西来做到这一点？我找不到任何 CSS 来根据 z-index 选择元素，所以我猜这是不可能的。

是将所有模态窗口从 #main 容器中取出的唯一选择吗？或者还有其他想法吗？

非常感谢!

Answer 1

对于寻找此问题答案的任何人，我从未找到使用 z-index 或任何类似方法将 filter: blur 应用于特定图层的方法。但是，通过使用背景过滤器:

-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); 

我设法达到了预期的效果。注意这个方法是only supported in Safari and Chrome目前，但希望在未来的几个月和几年内有更多的浏览器支持它，因为它看起来非常棒!