新图不显示主因是浏览器缓存旧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 渐变占位

用 标签实现平滑切换，如何避免闪动和重排？

直接替换 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 和定位怎么配？

背景图属于元素自身绘制层，无法用 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 更稳