纯CSS渐变仅能实现基础颗粒，真正可控、有艺术感的噪声需用SVG内联滤镜+background-blend-mode组合；feTurbulence须设type="fractalNoise"、baseFrequency="0.55"、numOctaves="2"，配合overlay（深色）或multiply（浅色）混合模式，并确保SVG viewBox与编码正确。
filter: url(#noise) 到整个容器上，只会让文字发虚、边框糊掉。
为什么不能对 div 直接加 SVG 噪声滤镜
常见错误是这样写：
div { filter: url(#noise); }
结果发现按钮点击反馈变慢、文字边缘模糊、阴影失真——因为 filter 会把整个元素（含子内容）都送进滤镜管线，而 feTurbulence 是逐像素扰动，没有语义保护。
- 真正该被扰动的，只是背景色那一层，不是文字、图标、border
-
feTurbulence输出的是灰度图，必须和颜色层做混合，否则看到的是纯灰噪点 - 用
background-image: url("data:image/svg+xml,...")内联方式，才能确保只作用于背景，且不触发额外 HTTP 请求
用 feTurbulence 生成可调噪点纹理的关键参数
type、baseFrequency、numOctaves 这三个值决定“艺术感”上限：
-
type="fractalNoise"—— 必须设这个，type="turbulence"会偏移坐标而非扰动颜色，不适合做背景纹理 -
baseFrequency="0.55"—— 小于 0.4 粒子太疏、大于 0.7 又太密；0.55 是深色背景下颗粒清晰又不刺眼的甜点值 -
numOctaves="2"—— 设 3 或 4 容易过载，尤其在 Safari 下渲染卡顿；2 层足够叠加出丰富频谱，且兼容性稳 - 别加
stitchTiles="stitch"—— 看似防平铺接缝，实则在某些 Chrome 版本引发渲染撕裂，去掉更安全
background-blend-mode 怎么选才不糊底色
噪声 SVG 本身是单色（#000）灰度图，靠混合模式把它“染”成你要的颜色。错用 multiply 在深色背景上会吞掉细节，screen 又太亮：
立即学习“前端免费学习笔记（深入）”；
- 深色主题首选
overlay：保留底层色相，同时让噪点在暗区显灰、亮区显白，模拟胶片颗粒的光学响应 - 浅色主题用
multiply更稳妥，但记得把噪声图 baseFrequency 调低到 0.3 左右，避免糊成一块 - 绝对不要用
normal—— 那等于直接盖一层 PNG，失去 SVG 滤镜的动态可调性 - 如果想加一点暖调颗粒，可在 SVG 里把
<rect></rect>的fill改成#333，再配overlay，比后期调色更自然
内联 SVG Data URL 的尺寸与编码陷阱
很多人复制在线生成器的 Data URL，粘贴后颗粒消失——大概率是 URL 编码错了或 viewBox 尺寸不匹配：
- SVG 必须设
viewBox="0 0 100 100"，且<rect width="100" height="100"></rect>，否则平铺时接缝错位 - URL 中所有
#要编码为%23，为 <code>%3C，>为%3E，少一个就解析失败 - 最终 Data URL 长度建议控制在 800 字符内，超长可能被旧版 Safari 截断
- 测试是否生效：把 Data URL 粘到浏览器地址栏回车，应直接显示一张带噪点的灰色图
feTurbulence 的输出灰度范围、background-blend-mode 的混合阈值、以及顶层 rgba() 色层的透明度三者拧在一起调，差 0.05 的 alpha 值，视觉情绪就偏冷或偏躁。
