SVG Filter turbulence在css过滤器中用于应用噪声，但它不透明

qmelpv7a 于 2023-04-23 发布在其他

关注(0)|答案(1)|浏览(55)

我的目标是让我的背景在透明的同时变得嘈杂。我有一个div容器，其中我有整个页面，例如我在这个“div容器”中有一个蓝色的圆圈。最终目标是让圆圈模糊并移动它，这要归功于JS来动画背景，但这是以后的事情。圆圈必须是可见的，但很明显，由于SVG创建的纹理是在路上。我不想使用z索引把它放在背景中，因为我想在圆圈上应用噪音，不透明度似乎不是很好的方法。有什么想法吗？
下面是HTML：

.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%;
}

<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>

css

来源：https://stackoverflow.com/questions/76067902/svg-filter-turbulence-used-in-css-filters-to-apply-noise-but-its-not-transparen

1条答案

按热度按时间

t9aqgxwy1#

.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>

你的代码的问题是过滤器也被应用到了圆上。这就是为什么它没有出现。
这是通过在 Package 器上使用灰色背景和背景过滤器来将背景与过滤器分离而修复的。在这种情况下，过滤器将仅应用于背景。
如果你愿意的话，我建议你阅读backdrop-filter的文档来获得更多的信息。
编辑：添加了-webkit-backdrop-filter属性，因为Safari目前只支持该属性

赞(0）回复(0）举报 2023-04-23

我来回答

SVG Filter turbulence在css过滤器中用于应用噪声，但它不透明

1条答案

相关问题

热门标签

最新问答