通过为 html 元素的 background 属性添加 CSS transition，可在背景图切换时实现平滑的淡入淡出效果，避免突兀的白屏闪烁。无需 JavaScript 动画，纯 CSS 即可完成。
通过为 `html` 元素的 `background` 属性添加 css `transition`，可在背景图切换时实现平滑的淡入淡出效果，避免突兀的白屏闪烁。无需 javascript 动画，纯 css 即可完成。
要实现背景图片的优雅切换，关键在于利用 CSS 的 transition 属性对 background（含 background-image、background-position 等）进行渐变控制。你当前的代码中每次直接修改 selector.style.backgroundImage，浏览器会立即重绘，中间因新图片未加载完成或渲染延迟而短暂露出默认背景（通常是白色），造成“闪白”现象。
只需在原有 CSS 中为 html 添加过渡声明即可解决：
html {
background: url("/cover1.webp") no-repeat center center fixed;
background-size: cover;
/* 启用 background 的过渡动画 */
transition: background 1000ms ease-in-out;
/* 兼容性前缀（现代浏览器已普遍支持，可酌情保留或省略） */
-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
}
⚠️ 注意事项：
-
transition必须作用于被动态修改的属性所在的选择器（这里是html），且需在初始样式中定义，不能仅靠 JS 内联设置； -
background是简写属性，过渡生效的前提是：前后两次设置的background值在可插值范围内（如url()路径变化 + 相同no-repeat center center fixed等其他子属性保持一致）。因此建议始终使用完整background赋值（而非仅backgroundImage），以确保过渡稳定：
// ✅ 推荐：统一使用 background 简写，保证 transition 可触发
function changeBg() {
const images = [
'url("/cover1.webp")', 'url("/cover2.webp")', /* ... */
];
const selector = document.querySelector('html');
const bg = images[Math.floor(Math.random() * images.length)];
// 关键：同时指定其他 background 子属性，保持一致性
selector.style.background = `${bg} no-repeat center center fixed`;
selector.style.backgroundSize = 'cover';
}
setInterval(changeBg, 10000);
- 过渡时长（如
1000ms）与切换间隔（如10000ms）应合理错开——建议过渡时间 ≤ 切换间隔的 30%（例如 800–1200ms），避免多张图片叠加过渡导致视觉混乱； - 若需更精细控制（如淡出→空白→淡入），可借助两层
div+opacity动画或 CSS@keyframes，但本方案以简洁、高性能、零依赖为目标，适用于大多数全屏轮播场景。
总结：一个 transition: background 就能显著提升用户体验。它轻量、声明式、易于维护，是实现背景图平滑切换的首选方案。
