新图不显示主因是浏览器缓存旧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渐变占位
用 <img alt="css图像与背景样式实战_实现图片与背景的切换效果" > 标签实现平滑切换，如何避免闪动和重排？
直接替换 src 属性会导致空白期（新图加载中）和 layout shift（尺寸未固定时）。关键在于预加载 + 尺寸锁定 + 透明控制。
- 提前加载下一张图：
const nextImg = new Image(); nextImg.src = "2.jpg";
等nextImg.onload触发后再执行切换 - 容器必须有明确宽高：
width和height不要用auto，否则图片加载完成前高度塌陷 - 用两张
<img alt="css图像与背景样式实战_实现图片与背景的切换效果" >叠加，通过opacity控制显隐：<div class="img-switcher"> @@##@@ @@##@@ </div>
切换时移除.active的 opacity，给.next加 opacity 1，并用transition: opacity 0.4s - 记得设置
img { display: block; }，避免底部默认留白
背景图与 <img src="1.jpg" class="active" alt="css图像与背景样式实战_实现图片与背景的切换效果" > 混用时，z-index 和定位怎么配？
背景图属于元素自身绘制层，无法用 z-index 单独提升；而 <img src="2.jpg" class="next" alt="css图像与背景样式实战_实现图片与背景的切换效果" > 是文档流内元素，可参与层叠上下文。混用时容易出现遮挡错乱。
- 若需背景图在底层、图片在上层：给容器设
position: relative，背景图写在容器上；<img alt="css图像与背景样式实战_实现图片与背景的切换效果" >设position: absolute并保证父容器有overflow: hidden防溢出 - 避免
z-index失效：父级没设position（非static）时，子元素的z-index无效 - 响应式场景下慎用
background-size: cover+<img alt="css图像与背景样式实战_实现图片与背景的切换效果" >并存：二者缩放逻辑不同，同一视口下可能错位；推荐统一用一种方案，或用object-fit: cover替代<img alt="css图像与背景样式实战_实现图片与背景的切换效果" >的等比裁剪
切换效果卡顿？查查这些隐藏性能点
视觉切换卡顿往往不是 JS 执行慢，而是渲染层触发了重绘（repaint）或重排（reflow），尤其在动画过程中。
立即学习“前端免费学习笔记（深入）”；
- 避免在切换逻辑中读取
offsetHeight、getComputedStyle等触发同步布局计算 - 用
will-change: opacity提示浏览器该元素将动画，提前分配合成层（但别滥用，每个都加会内存暴涨） - 背景图切换慎用
background-position动画模拟“切换”：它虽不触发布局，但大图平移仍可能掉帧；优先考虑opacity或transform: translateZ(0)强制 GPU 加速 - 移动端要注意：Safari 对
background-image切换的硬件加速支持弱于 Chrome，实测用两张<img alt="css图像与背景样式实战_实现图片与背景的切换效果" >+transform更稳
