最简实现是直接用 document.body.style.backgroundImage 赋值合法 CSS url() 字符串，路径需带引号；须同步设置 backgroundSize、backgroundRepeat 等属性确保铺满全屏；若需淡入淡出，需用两层元素配合 opacity 过渡。
点击按钮时触发背景图切换的最简实现
直接用 document.body.style.backgroundImage 赋值是最轻量的方式，不需要引入任何库。关键在于图片路径要写成合法的 CSS url() 字符串格式，且必须带引号（单/双均可），否则浏览器会解析失败。
- 准备一组图片路径，存为数组，比如
const bgImages = ["img/1.jpg", "img/2.jpg", "img/3.jpg"]; - 绑定按钮
onclick或监听click事件，调用切换函数 - 用
Math.floor(Math.random() * bgImages.length)获取随机索引 - 设置样式：
document.body.style.backgroundImage = `url("${bgImages[index]}")`;
为什么背景图不显示或只闪一下
常见原因是路径错误或 CSS 覆盖。浏览器控制台若报 404，说明路径不对；若没报错但图不出现，大概率是其他 CSS 规则（如外部样式表里的 body { background-image: none; }）强行重置了内联样式。
- 检查开发者工具 Elements 面板中
body元素的 computed styles，确认background-image是否被覆盖 - 确保图片路径相对于 HTML 文件位置正确，建议统一用相对路径（如
./images/bg1.jpg）或绝对路径（如/assets/bg2.jpg） - 避免在 CSS 中写
!important覆盖内联样式，如必须，改用document.body.style.setProperty("background-image", `url("${src}")`, "important")
让背景图铺满全屏且不重复
仅设置 backgroundImage 不够，必须同步配置 backgroundSize、backgroundRepeat 等属性，否则默认行为会导致拉伸、留白或平铺。
- 推荐一次性设置多个背景相关样式：
document.body.style.cssText = "background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(...);" - 不要只设
backgroundImage，否则其他 background 属性仍沿用浏览器默认值或之前 CSS 定义 - 若需保留原有背景色（如加载中 fallback），可加
background-color: #000;到cssText中
切换时加淡入淡出效果（无需 jQuery）
CSS 过渡只能作用于可动画属性，background-image 本身不支持过渡，得用两层元素 + opacity 切换模拟。
立即学习“前端免费学习笔记（深入）”；
- 在
<body>内插入一个全屏<div id="bg-fade">，初始opacity: 0 - 点击时先更新新图的
backgroundImage，再用setTimeout延迟 10ms 后设opacity: 1 - 旧图保留在 body 上，新图在 div 上，用
transition: opacity 0.4s ease实现淡入 - 下次切换前，先把当前 div 的 opacity 设回 0，再替换 background，再设回 1 —— 否则会卡在半透明状态
复杂点在于 DOM 管理和状态同步，简单场景不加动画更稳。真要加，优先考虑 CSS 自定义属性 + transition，而不是反复操作 style 对象。
