CSS 过滤器中使用的 SVG 过滤器湍流来应用噪声，但它不透明

Question

我的目标是让我的背景在透明的同时嘈杂。我有一个 div 容器，其中有整个页面，例如我在这个“div 容器”中有一个蓝色圆圈。最终目标是使圆圈模糊并通过 JS 移动它来为背景设置动画，但那是稍后的事情。圆圈必须是可见的，但显然由于 SVG 创建的纹理挡住了路。我不想使用 z-index 将它放在背景中，因为我希望将噪音应用于圆圈，而不透明度似乎不是这样做的好方法。有什么想法吗？

这是 HTML：

<div class="background">
  

<div class="circle"></div>
<svg style="display: none">
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='6.29' 
      numOctaves='6' 
      stitchTiles='stitch'/>
  </filter>
</svg>
  
</div><!-- end of div container -->`

这是我的 CSS：

.background {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  filter: url(#noiseFilter);
}

.circle {
  width: 400px;
  height: 400px;
  background: blue;
  border-radius: 50%;
}

Answer 1

.background {
  background: #555;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: url(#noiseFilter);
  -webkit-backdrop-filter: url(#noiseFilter)
}

.circle {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
  opacity: 50%
}

<div class="background">
  <div class="wrapper">
    <div class="circle"></div>

    <svg style="display: none">
      <filter id='noiseFilter'>
        <feTurbulence 
          type='fractalNoise' 
          baseFrequency='6.29' 
          numOctaves='6' 
          stitchTiles='stitch'
        />
      </filter>
    </svg>
  </div>
</div>

您的代码的问题是过滤器也被应用于圆圈。这就是它没有出现的原因。

通过在包装上使用灰色背景和背景滤镜将背景与滤镜分开来解决这个问题。在这种情况下，过滤器将仅应用于背景。

如果需要，我建议阅读 backdrop-filter 的文档以获取更多信息。

编辑：添加了

-webkit-backdrop-filter

属性，因为Safari目前只支持