在使用Backdrop-filter时，堆叠的前景元素会被忽略其模糊值，只有最顶层的元素会被应用模糊效果。但有时候，我们希望在前景中应用模糊效果，那么我们该怎么办呢？

我们可以在堆叠元素中添加一个新的容器，在这个容器中应用模糊效果，并在上面堆叠我们需要的元素。这样，我们就可以在堆叠的前景元素中应用模糊效果了。

下面是一个代码示例：

HTML：

  

    

      
Foreground element
    
  
  

    
Background element
  

CSS：

.parent {
  position: relative;
  width: 400px;
  height: 400px;
}

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

.foreground-element {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  background-color: white;
}

.background-element {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: gray;
}

在这个示例中，我们在父级容器中添加了两个堆叠的元素。首先，我们在父级容器中添加了一个名为'blur-container”的新容器，接着，在这个容器中应用了模糊效果，并将其置于堆叠元