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

Question

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

* {
  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 blur 会比本例中看到的更模糊最里面的圆。我正在 Chrome.

中查看此内容

此处的总体目标是使最内圈 比其内部的 div 更 模糊。我该如何完成？

Answer 1

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

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

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>

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

Backdrop-filter ignores blur value on stacked elements in forefront

html

css

blur

css-filters

gaussianblur