通过为 html 元素添加 CSS transition 属性，可让背景图切换时产生自然的淡入淡出效果，避免白屏闪烁，无需 JavaScript 动画逻辑。
通过为 `html` 元素添加 css `transition` 属性，可让背景图切换时产生自然的淡入淡出效果，避免白屏闪烁，无需 javascript 动画逻辑。
要实现背景图片的平滑淡入淡出（fade in/out）切换，核心在于利用 CSS 的 transition 属性对 background-image 进行渐变过渡。虽然 background-image 本身不被所有浏览器直接支持为可过渡属性（尤其在旧版 Safari 中），但现代主流浏览器（Chrome、Firefox、Edge、Safari 15.4+）已支持对 background 简写属性（含 background-image）进行过渡——前提是过渡时间足够长、且起始/结束状态均明确指定。
你当前的代码中，每次调用 selector.style.backgroundImage = bg 都会立即替换背景，导致视觉跳变。解决方法是在 CSS 中为 html 添加过渡声明，并确保初始背景与后续切换保持一致的渲染上下文：
html {
background: url("/cover1.webp") no-repeat center center fixed;
background-size: cover;
/* 关键：启用 background 属性的平滑过渡 */
transition: background 1s ease-in-out;
/* 兼容性前缀（可选，现代项目中通常可省略） */
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
}
⚠️ 注意事项：
-
不要仅写
transition: background-image—— 多数浏览器不支持该子属性过渡，必须使用background（完整简写）。 -
确保
background值结构一致：所有图片 URL 均应搭配相同的no-repeat center center fixed和background-size: cover，否则过渡可能中断或失效。 -
避免
background: none或空值：切换过程中若某次赋值为无效 URL 或initial，会导致背景清空并闪白。建议在 JS 中做基础校验：function changeBg() { const images = [ 'url("/cover1.webp")', 'url("/cover2.webp")', /* ... */ ]; const selector = document.documentElement; // 推荐用 documentElement 替代 querySelector('html') const bg = images[Math.floor(Math.random() * images.length)]; // 确保样式安全写入 selector.style.background = `${bg} no-repeat center center fixed`; selector.style.backgroundSize = 'cover'; } setInterval(changeBg, 10000);
✅ 最佳实践补充：
如需更高可控性（如精确控制淡出→淡入时序），可进阶使用双层 div + opacity 过渡或 CSS 自定义属性（CSS Custom Properties）配合 @keyframes，但对多数场景而言，上述 transition: background 方案简洁、高效、兼容性良好，是首选解决方案。
