CSS Paint API可实现可控、可缩放、不模糊的噪点背景，需通过registerPaint注册自定义paint()类，利用确定性哈希函数生成稳定噪声，并依赖inputProperties响应CSS自定义属性动态调整。
直接上结论：CSS Paint API 能做可控、可缩放、不模糊的噪点背景，但必须用 registerPaint + 自定义 paint() 类，不能靠 CSS 渐变“凑数”——后者在高 DPI 屏或缩放时颗粒失真严重，且无法响应 CSS 自定义属性动态调整。
为什么不用渐变模拟噪点？
repeating-conic-gradient 那套技巧本质是利用渲染器对极小角度渐变的像素采样误差，属于 hack。它在以下场景立刻失效：
• Chrome DevTools 切到 125% 缩放，噪点变条纹
• Safari 下 background-size > 2000px 会触发 tile 边界重绘撕裂
• 无法随 --noise-intensity: 0.3 实时调节密度，只能换整条 CSS 规则
• 不支持透明通道独立扰动（比如只噪点 RGB、保留 alpha 干净）
Paint Worklet 必须写的三件事
一个能跑通的噪点 Worklet 至少要满足这三点，缺一不可：
-
registerPaint('noise-bg', NoiseBg)中的字符串名必须和 CSS 里background-image: paint(noise-bg)完全一致（大小写敏感） -
inputProperties里列出的所有自定义属性，如'--noise-scale'，必须提前在元素上声明（例如style="--noise-scale: 8"），否则props.get()返回 undefined -
paint()函数体内禁止访问document、window、fetch、setTimeout，连console.log都会报错；所有逻辑必须基于ctx、geom和props
如何写出真正可用的噪点 paint() 方法
核心不是“画随机点”，而是用伪随机函数生成确定性噪声——这样缩放、重绘时颗粒才稳定。下面这段代码可直接复制使用：
class NoiseBg {
static get inputProperties() {
return ['--noise-scale', '--noise-opacity', '--noise-color'];
}
paint(ctx, geom, props) {
const scale = props.get('--noise-scale').value || 4;
const opacity = props.get('--noise-opacity').value || 0.08;
const color = props.get('--noise-color').value || '#000';
<pre class="brush:php;toolbar:false;">// 确定性哈希：用坐标算出固定随机值，避免 Math.random()
const hash = (x, y) => {
const s = x * 0.123456789 + y * 0.987654321;
return 0.5 + 0.5 * Math.sin(s * 12.9898 + 78.233) % 1;
};
ctx.fillStyle = color;
for (let x = 0; x 0.7) { // 控制密度
ctx.fillRect(x, y, 1, 1);
}
}
}
// 叠一层半透明色块模拟胶片颗粒感
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.fillRect(0, 0, geom.width, geom.height);} } registerPaint('noise-bg', NoiseBg);
关键点：
• 哈希函数替代 Math.random()，确保同一坐标永远输出相同灰度值
• globalAlpha 控制整体噪点强度，比改 fillStyle 透明度更安全
• 最后一层半透明填充不是装饰，它让噪点在深色/浅色背景下都有层次，避免纯黑点扎眼
最容易被忽略的加载与调试问题
Paint Worklet 不是普通脚本，加载失败不会报红字，只会静默回退到空白背景：
- Worklet 文件必须通过
css.paintWorklet.addModule('noise.js')加载，且该调用必须在任何用到paint(noise-bg)的 CSS 规则前执行；放在里最稳妥 - Chrome 开发者工具里看不到
paint()内部断点，调试只能靠ctx.fillRect()画参考线 + 对比 geom.width/height 是否符合预期 - 修改 Worklet 代码后，浏览器不会自动刷新模块，必须手动执行
location.reload()或清空 Worklet 缓存（DevTools → Application → Clear storage → “Clear site data”）
真正难的不是写噪点，是让这个机制在各种构建流程（Vite、Webpack）、部署环境（CDN、Service Worker）里稳定加载并热更新——这些细节，往往拖到上线前两小时才暴露。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
