通过为 html 元素添加 CSS transition 属性，可让背景图片在切换时产生自然的淡入淡出动画效果，避免生硬跳变和白屏闪烁。
通过为 `html` 元素添加 css `transition` 属性，可让背景图片在切换时产生自然的淡入淡出动画效果，避免生硬跳变和白屏闪烁。
要实现背景图片的平滑切换（而非突兀替换），关键在于利用 CSS 的 transition 属性对 background-image 进行过渡控制。虽然 background-image 本身在部分旧浏览器中不支持直接过渡，但在现代主流浏览器（Chrome、Firefox、Safari、Edge）中，对 background 简写属性设置 transition 是可靠且广泛支持的方案——浏览器会自动对图像加载与切换过程进行视觉插值，呈现柔和的淡入淡出效果。
✅ 正确做法：在原有 CSS 中为 html 添加过渡声明：
html {
background: url("/cover1.webp") no-repeat center center fixed;
background-size: cover;
/* 统一启用 background 的过渡：持续1秒，缓动函数 ease-in-out，延迟0秒（可省略） */
transition: background 1000ms ease-in-out;
/* -webkit- 等前缀在现代项目中通常已非必需，但保留可增强兼容性 */
-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
}
⚠️ 注意事项：
-
不要仅过渡
background-image：单独写transition: background-image ...在多数浏览器中无效，必须使用background（包含 color/image/position/size 等）才能触发渲染引擎的平滑插值。 -
避免
fixed与transition的潜在冲突：background-attachment: fixed在某些滚动场景下可能影响过渡表现；若发现动画卡顿或失效，可临时改为scroll测试，再结合will-change: background优化（谨慎使用）。 - 预加载提升体验：当前 JS 随机切换时，新图片可能未缓存，导致切换瞬间空白。建议在页面加载时预加载所有图片：
const imageUrls = [
"/cover1.webp", "/cover2.webp", /* ... 其他路径 */
];
imageUrls.forEach(src => {
const img = new Image();
img.src = src;
});
? 进阶提示：如需更精细控制（如交叉淡入、暂停交互时停止轮播），可改用两个叠加的 <div> 背景层 + <code>opacity 过渡，配合 JS 控制层级与透明度——但对大多数场景，上述 background + transition 方案简洁高效、语义清晰、维护成本低。
最终，配合你原有的 setInterval(changeBg, 10000) 脚本，即可实现每 10 秒无缝切换一张背景图，视觉流畅，无白屏闪烁。
