噪点纹理背景 · 背景
前端Wiki/CSS 特效合集/噪点纹理背景

噪点纹理背景

SVG 噪点叠加在纯色上,消除渐变色带的高级做法

← 返回 背景 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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}

HTML 结构

HTML
<div class="fx">
<div class="noi"></div>
</div>
实现要点:feTurbulence 生成的噪点 data-uri + 低透明度叠加

其它背景类特效

回到 前端Wiki 首页 · CSS 特效合集