新图不显示主因是浏览器缓存旧URL；需加时间戳参数强制重载、确保路径正确、检查样式覆盖，并用opacity叠加层实现平滑切换。
用 background-image 切换背景图时，为什么新图不显示？
常见原因是浏览器缓存了旧的背景 URL，尤其在动态修改 style.backgroundImage 或切换 CSS 类时。直接赋值 "url(1.jpg)" 不会触发资源重载，如果路径没变，浏览器可能复用缓存的渲染结果。
- 强制刷新背景图：在 URL 后拼上时间戳参数，例如
"url(1.jpg?t=" + Date.now()) - 确保路径正确：相对路径以 CSS 文件位置为基准，不是 HTML 页面；建议统一用绝对路径或
/images/xxx.jpg - 检查计算样式是否被其他规则覆盖：用浏览器开发者工具查看
Computed面板中的background-image实际值 - 透明过渡更自然：切换前先设
transition: background-image 0.3s，但注意——background-image本身**不支持 CSS 过渡动画**，需改用opacity叠加层或background-color渐变占位
用 ![css图像与背景样式实战_实现图片与背景的切换效果]()
直接替换 src 属性会导致空白期（新图加载中）和 layout shift（尺寸未固定时）。关键在于预加载 + 尺寸锁定 + 透明控制。
- 提前加载下一张图：
const nextImg = new Image(); nextImg.src = "2.jpg";
等
nextImg.onload触发后再执行切换 - 容器必须有明确宽高：
width和height不要用auto，否则图片加载完成前高度塌陷 - 用两张
opacity控制显隐：@@##@@ @@##@@切换时移除
.active的 opacity，给.next加 opacity 1，并用transition: opacity 0.4s - 记得设置
img { display: block; }，避免底部默认留白
背景图与 
背景图属于元素自身绘制层，无法用 z-index 单独提升；而 
- 若需背景图在底层、图片在上层：给容器设
position: relative，背景图写在容器上；position: absolute并保证父容器有overflow: hidden防溢出 - 避免
z-index失效：父级没设position（非static）时，子元素的z-index无效 - 响应式场景下慎用
background-size: cover+object-fit: cover替代
切换效果卡顿？查查这些隐藏性能点
视觉切换卡顿往往不是 JS 执行慢，而是渲染层触发了重绘（repaint）或重排（reflow），尤其在动画过程中。
立即学习“前端免费学习笔记（深入）”；
- 避免在切换逻辑中读取
offsetHeight、getComputedStyle等触发同步布局计算 - 用
will-change: opacity提示浏览器该元素将动画，提前分配合成层（但别滥用，每个都加会内存暴涨） - 背景图切换慎用
background-position动画模拟“切换”：它虽不触发布局，但大图平移仍可能掉帧；优先考虑opacity或transform: translateZ(0)强制 GPU 加速 - 移动端要注意：Safari 对
background-image切换的硬件加速支持弱于 Chrome，实测用两张transform更稳
实际项目里最常被忽略的是预加载时机和容器尺寸锁定——没预加载，切换就是白屏；没固定尺寸，整个布局跟着抖。这两点不解决，再 fancy 的 CSS 动画也立不住。