用 CSS background-blend-mode 叠加半透明噪点图最高效，推荐 overlay/soft-light 模式、≤200×200px 尺寸、统一 background-size，自制 64×64 噪点 PNG 更可控。
用 CSS 的 background-blend-mode 叠加噪点纹理最省事
直接叠加图层比 JS 生成或 Canvas 绘制快得多，且兼容性足够（Chrome 45+/Firefox 30+/Safari 9.1+）。关键是把噪点图做成半透明 PNG 或 SVG，再和背景图叠在一起。
- 噪点图建议尺寸 ≤ 200×200px，重复平铺时不会卡顿；太大反而增加渲染压力
- 用
background-blend-mode: overlay或soft-light效果最接近胶片颗粒感，multiply会太暗，screen容易发灰 - 必须确保两张图都设为
background-size: cover或100% 100%，否则错位——尤其当背景图用center/cover而噪点图用默认repeat时，立刻露馅
噪点纹理怎么生成又小又准
别去下不明来源的“复古噪点 PNG”，容易带 alpha 残影或尺寸不匹配。自己生成更可控：
- 用 Figma / Photopea 新建 64×64 画布 → 填充灰色（如
#333）→ 添加「添加杂色」滤镜（数量 30–50%，高斯分布，单色勾选）→ 导出为 PNG-24，文件通常 - 或者用纯 CSS 生成（免请求）：
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h2v2H0z' fill='%23000' opacity='.08'/%3E%3Ccircle cx='0' cy='0' r='.3' fill='%23fff'/%3E%3Ccircle cx='2' cy='0' r='.3' fill='%23fff'/%3E%3Ccircle cx='0' cy='2' r='.3' fill='%23fff'/%3E%3Ccircle cx='2' cy='2' r='.3' fill='%23fff'/%3E%3C/svg%3E");—— 这是极简版噪点 SVG Base64，可调opacity控制强度 - 导出后用
curl -sI或浏览器 Network 面板确认响应头含Content-Type: image/png，否则 Safari 可能拒绝渲染
background-image 多层写法容易漏掉逗号和顺序
CSS 多背景图从下到上堆叠，顺序反了就白干。噪点层必须在最上面，否则被背景图盖住：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
body {
background-image:
url('bg-photo.jpg'), /* 底层：主图 */
url('noise.png'); /* 顶层：噪点 */
background-size: cover, 200px; /* 注意：每个值按层对应，不能只写一个 cover */
background-blend-mode: overlay;
background-position: center, center;
background-repeat: no-repeat, repeat;
}- 逗号分隔各层，但
background-repeat、background-position等属性也必须一一对应，少一个就会 fallback 到默认值 - 如果主图用了
linear-gradient，记得把噪点层放 gradient 后面——gradient 是图像，不是颜色，一样参与 blend - 用 DevTools 的 Elements 面板点开
background-image，能看到每层预览图，错位或缺失一眼就能发现
移动端缩放时噪点糊成一片？那是 image-rendering 没设
iOS Safari 和部分安卓浏览器默认对小图做平滑插值，把像素级噪点拉伸成模糊灰斑。加一行就能硬核还原颗粒感：
立即学习“前端免费学习笔记（深入）”；
- 给噪点图所在元素加
image-rendering: pixelated（Chrome/Firefox）或-webkit-optimize-contrast（旧版 Safari） - 更稳妥写法：
image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; - 注意：这个属性只对
background-image中的位图生效，SVG 噪点不受影响，但 SVG 在高 DPR 屏上可能发虚，此时优先选 PNG +pixelated
实际调的时候，background-blend-mode 的混合效果受底层图片明暗影响极大——同一张噪点图，放在深色背景上显脏，浅色上显浮。最好在真实内容区域测试，别只看空 body。
