BACKGROUND & DECOR
噪点颗粒Noise / Grain Overlay
一层细密的半透明噪点盖在渐变上，消除色带、增加"胶片感"。
效果预览
渐变 + 噪点 = 胶片质感
feTurbulence · opacity .35 · overlay
适合用在哪
极光渐变背景、深色 Hero、品牌视觉区。
容易踩的坑
- 噪点 opacity 超过 0.4 会让整页像脏屏，浅色正文对比度也随之下降。
- 给噪点层加动画会每帧全屏重绘，低端手机滚动明显掉帧。
- 噪点层忘了 pointer-events:none，会盖住按钮导致整页点击失效。
设计提示词 · Prompt
噪点颗粒（Noise / Grain Overlay）：用内联 SVG feTurbulence 生成噪点图（baseFrequency 0.7-0.9、numOctaves 3-4），以 ::after 全屏铺盖、opacity 0.15-0.35、mix-blend-mode:overlay 或 soft-light。渐变背景（尤其大面积深色渐变）必加噪点——它能消除 8-bit 渐变色带（banding），让渐变看起来像印刷品。噪点尺寸 120-200px 平铺即可，不必动画。低透明度是关键：能隐约感觉到颗粒但看不清单个点才对。
Noise / Grain Overlay: Generate a noise image with an inline SVG feTurbulence (baseFrequency 0.7-0.9, numOctaves 3-4), lay it full-screen via ::after at opacity 0.15-0.35 with mix-blend-mode:overlay or soft-light. Gradient backgrounds (especially large dark gradients) must always get noise — it removes 8-bit gradient banding and makes the gradient look like print. A 120-200px tiled noise texture is enough; no animation needed. Low opacity is the key: you should faintly sense the grain but never be able to make out individual dots.
常见搭配
同一页面里经常和「噪点颗粒」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-noisebg"> <b>渐变 + 噪点 = 胶片质感</b> <span class="d-noisebg__tag">feTurbulence · opacity .35 · overlay</span> </div>