看不到颗粒是因为CSS background与SVG滤镜分属独立渲染层，滤镜作用于整个盒模型而非渐变本身；应将渐变转为SVG 并用 精准处理，参数设为 baseFrequency="0.05 0.05"、numOctaves="2"、seed="42"。
用 svg 滤镜叠加 background 时，为什么看不到颗粒？
因为纯 CSS 的 background（包括渐变）和 SVG 滤镜是两个独立渲染层，直接套用 filter: url(#noise) 到一个带渐变的元素上，滤镜作用的是整个元素盒模型，不是“只滤渐变”，颗粒会被拉伸、模糊，甚至被背景色吃掉。
实操建议：
- 把渐变本身做成 SVG
<lineargradient></lineargradient>，再用<filter></filter>对它做噪声叠加——这样滤镜精准作用于颜色过渡区域 - 避免对
div这类容器元素整体加滤镜；改用<svg></svg>内联绘制，可控性高 - 噪声滤镜必须设
type="matrix"或用<feturbulence></feturbulence>，feGaussianBlur之类会抹平颗粒感
feTurbulence 的关键参数怎么调才出真实颗粒？
feTurbulence 是生成自然噪点的核心，但默认值几乎不可用：太滑、太稀、太灰。真正起效的是这三个参数组合：
-
baseFrequency="0.05 0.05"：值越小颗粒越大；0.02–0.08是实用区间，超过0.1就成雪花噪点了 -
numOctaves="2"：控制细节层次；设为1颗粒生硬，3以上容易糊成雾状，2最稳 -
seed="42"：固定随机种子，否则每次刷新颗粒 pattern 都变，调试时无法复现
别碰 stitchTiles——它在渐变边缘强制拼接，反而造成明显接缝。
立即学习“前端免费学习笔记（深入）”；
CSS 和 SVG 联动时，background 该设成什么？
很多人想“用 CSS 渐变打底 + SVG 噪声盖章”，结果发现噪声不透明、颜色发灰。根本原因是：SVG 滤镜输出的是 RGBA，而 CSS background 是合成终点，没留 alpha 处理空间。
正确做法：
- SVG 内部用
<rect></rect>填充渐变，再套滤镜——整个绘制流程都在 SVG 上下文里，alpha 自然保留 - CSS 层只负责尺寸和定位，
background设为transparent，绝不填色 - 如果必须叠加一层 CSS 背景色（比如深色模式 fallback），用
background-blend-mode: overlay，但得测试各浏览器兼容性，Safari 对 blend + filter 组合支持不稳定
移动端或低性能设备上颗粒动画卡顿怎么办？
一旦给噪声加 animation（比如动 seed 或 baseFrequency），iOS Safari 和部分安卓 WebView 会掉帧——因为 feTurbulence 是 GPU 密集型计算，且不能被 CSS 动画引擎优化。
轻量替代方案：
- 放弃动态噪声，用多张预渲染的静态噪声图（
.png，带 alpha），CSS@keyframes切换background-image - 若坚持 SVG 方案，把
feTurbulence改成feImage引入一张小尺寸噪声纹理 SVG，再用feTile平铺——CPU 开销下降 70% 以上 - 永远给
svg元素加will-change: filter，但仅限真正需要动画的场景，滥用反而触发多余图层提升
最常被忽略的一点：噪声纹理尺寸别超过 256x256，大图在低端设备上 decode 和 upload 都慢，颗粒感没增强，首屏延迟先上去了。
