背景过滤器忽略最前面堆叠元素的模糊值

问题描述

以下代码段中最小的最里面的圆具有未应用的 backdrop-filter 模糊 10rem。看起来 span 元素从其父元素继承了完全相同的模糊量，而不是采用应应用的较高值。知道为什么和/或有任何已知的解决方法吗？

* {
  Box-sizing: border-Box;
  margin: 0; padding: 0;
}
html,body,section {
  height: 100%;
}
section,div,span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-image: 
    url(
      'https://media.giphy.com/media/MjHdjmbIFQuDHRkGbI/giphy.gif'
    );
  background-size: cover;
  background-position: center;
}
div,span {
  border-radius: 50%;
  width: 10rem; height: 10rem;
  background-color: rgba( 80%,100%,90%,0.1 );
  background-image: none;
  backdrop-filter: blur( 0.375rem );
  -webkit-backdrop-filter: blur( 0.375rem );  
}
span {
  width: 5rem; height: 5rem;
  backdrop-filter: blur( 10rem ); /* this gets ignored */
  -webkit-backdrop-filter: blur( 10rem ); /* 10rem blur isn't applied,why? */
}

<section> <div> <span></span> </div> </section>

10rem 模糊会比本例中看到的更模糊最里面的圆圈。我正在 Chrome 中查看此内容。

这里的总体目标是让最里面的圆比它在里面的 div 更模糊。我该如何实现？

解决方法

不要嵌套元素，将它们分开。

这是实现您想要的另一个想法

body{
  margin:0;
}

section {
  display: grid;
  height: 100vh;
  background-image: url('https://media.giphy.com/media/MjHdjmbIFQuDHRkGbI/giphy.gif');
  background-size: cover;
  background-position: center;
}

section * {
  border-radius: 50%;
  grid-area:1/1; /* make both overlap */
  margin:auto; /* and center them */
  width: 10rem;
  height: 10rem;
  background-color: rgba( 80%,100%,90%,0.1);
  backdrop-filter: blur( 0.375rem);
  -webkit-backdrop-filter: blur( 0.375rem);
}
section div {
  /* make a hole in the div for the span */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5rem),#000 0);
}

section span {
  width: 5rem;
  height: 5rem;
  backdrop-filter: blur( 2rem);
  -webkit-backdrop-filter: blur( 2rem);
}

<section>
  <div>  </div>
  <span></span>
</section>