SVG 噪点叠加在纯色上,消除渐变色带的高级做法
← 返回 背景 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .noi{height:220px;border-radius:14px;background:#0d1117;position:relative;overflow:hidden}
.fx .noi::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.6'/></svg>");opacity:.22}<div class="fx">
<div class="noi"></div>
</div>