Question

我的目标是制作具有模糊玻璃效果的盒子。为此，我使用：

background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(7px);

另外，在某些事件上，我想模糊整个页面，除了一个元素（我们称之为 element-x）。对于我使用的叠加层：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(2px);
  z-index: 5999;
}

我能够创建模糊玻璃效果。而且我还可以进行模糊叠加。

但是一旦 element-x 位于具有模糊玻璃效果的框内（嵌套）。它被覆盖变得模糊。

当我从框中取出 backdrop-filter: blur(7px); 时，它起作用了。

我知道这是一个堆叠顺序问题 (z-index)。但我无法让它正常工作，正如预期的那样。 我该如何解决这个问题？

好的。我为你构建了一个代码笔来重现（使用谷歌浏览器）： https://codepen.io/54mu3l/pen/JjNdBwd

在顶部，您会找到不起作用的解决方案。在底部，您会发现预期的行为（但没有玻璃模糊框）。

如您所见，顶部框的背景模糊。底部框没有：

一旦激活覆盖（只需单击屏幕上的任意位置）。顶部的橙色框变得模糊（但不应该）。底部的橙色框没有模糊：

编辑：有用的链接：