我的目标是让我的背景在透明的同时变得嘈杂。我有一个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>
1条答案
按热度按时间t9aqgxwy1#
你的代码的问题是过滤器也被应用到了圆上。这就是为什么它没有出现。
这是通过在 Package 器上使用灰色背景和背景过滤器来将背景与过滤器分离而修复的。在这种情况下,过滤器将仅应用于背景。
如果你愿意的话,我建议你阅读backdrop-filter的文档来获得更多的信息。
编辑:添加了
-webkit-backdrop-filter
属性,因为Safari目前只支持该属性