我试图通过使用模糊过滤器来获得智能模式弹出窗口，例如-webkit-filter: blur(10px);。当我将模糊应用于这样的特定元素时，这非常有用：
body.modal_open #main { -webkit-filter: blur(10px); }
但是，如果我的模态弹出窗口在#main中，过滤器也会应用于该元素，正如您所期望的那样。
我的问题是，是否有办法告诉浏览器不要将过滤器应用于特定元素？我试着添加：
body.modal_open .modal_window { -webkit-filter: blur(0px); }
但那并没有奏效。有没有办法根据元素的z-index或类似的东西来做到这一点？我找不到任何基于z-index选择元素的CSS，所以我猜不可能。
唯一的选择是将所有模态窗口从#main容器中取出吗？还是有更多的想法吗？
非常感谢提前！
答案 0 :(得分：0)
对于任何寻找答案的人，我从未找到使用z-index或类似方法的方法将filter: blur应用于特定图层。但是，通过使用背景过滤器：
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
我设法达到了预期的效果。请注意，此方法目前为only supported in Safari and Chrome，但希望更多浏览器在未来几个月和几年内支持此功能，因为它看起来非常棒！