将含有 backdrop-filter 属性的元素的 z-index 设置为 auto 或者比另一个具有更高 z-index 值的元素低。以下是一个示例：

HTML

  

  

    
Hello, World!
  

CSS

.container {
  position: relative;
}

.backdrop-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  backdrop-filter: blur(10px);
}

在此示例中，.backdrop-element 显示一个模糊的背景，而 .content 显示一个具有 z-index 值的文本。通过将 .backdrop-element 的 z-index 设置为 1，我们可以确保文本在其上层。但是，由于 backdrop-filter 会将该元素作为单个层处理，因此在此设置 z-index 将无效。要解决此问题，我们只需将 .content 作为 .backdrop-element 的同级元素，并为 .content 设置大于它的 z-index 值，如 2。这样一来，您的文本就可以覆盖并显示在 .backdrop-element 上了。