html - 背景滤镜模糊不会覆盖在下面的所有元素上

Question

我正在努力理解为什么backdrop-filter: blur()在叠加层中使用不会叠加并应用于它上面的所有元素。

在下面的屏幕截图中 - 覆盖在 div 上有效 - 但不适用于文本......什么条件会使背景覆盖在某些元素上而不是其他元素上？

以下是叠加样式：

.Nav-module_backdropOverlay__3EPp5 {
    background-color: rgba(0,0,0,.1);
    cursor: pointer;
    height: 100%;
    left: 0;
    outline: pointer;
    position: fixed;
    top: 0;
    visibility: visible;
    width: 100%;
    z-index: -10; // this z-index is set to position behind the top-nav bar - but above the main content.
// the parent z-index is 999;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}

我可以通过使用不同的背景颜色进行测试来验证叠加层是否堆叠在所有其他元素之上，并且叠加层确实可以正常工作

标签： htmlcssfilterz-index