background-image不能直接过渡，因规范明确其为不可动画属性，浏览器静默忽略transition；可靠方案是用opacity控制双图层显隐，并预加载、固定尺寸、避免重排。
直接用 transition: background-image 不会生效，浏览器不支持该属性动画；必须改用 opacity 控制图层显隐，再配合预加载和固定尺寸，才能真正平滑切换。
为什么 background-image 不能直接过渡
规范里明确把 background-image 列为不可动画属性，Chrome 会静默忽略 transition: background-image 0.3s，Firefox 和 Safari 表现也不一致。你看到的“动了”，大概率是重绘抖动，不是真实插值过渡。
能可靠过渡的只有硬件加速且支持插值的属性：opacity、transform、filter。其中 opacity 是最简单、兼容性最好的选择。
两张图叠放 + opacity 切换（推荐结构）
核心是让新旧图同时存在，仅靠透明度切换视觉焦点：
立即学习“前端免费学习笔记（深入）”；
- 容器设固定宽高（不能用
height: auto），否则opacity变化可能触发 layout 抖动 - 主图默认显示，备图初始
opacity: 0，并加transition: opacity 0.4s ease - 切换时，把主图
opacity设为0，备图设为1—— 不要等 JS 改src后再动样式，那会闪白屏 - 务必预加载备图：用
::before { content: url(new.jpg); visibility: hidden; }或 JS 创建new Image().src = 'new.jpg'
示例结构：
.img-switch {
position: relative;
width: 100%;
height: 300px;
}
.img-switch > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease;
}
.img-switch .img-main { opacity: 1; }
.img-switch .img-alt { opacity: 0; }
.img-switch.active .img-main { opacity: 0; }
.img-switch.active .img-alt { opacity: 1; }
用伪元素替代额外 img 标签
如果不想改 HTML，::before 或 ::after 是干净解法：
-
content: ''必须写，否则伪元素不渲染 - 给伪元素设
background-image、background-size: cover、background-position: center - 加
pointer-events: none，避免遮挡下层交互 - 不要依赖
z-index控制层级，用position: absolute+ 层叠顺序更稳
关键 CSS：
.fade-bg {
position: relative;
width: 100%;
height: 300px;
background: url('a.jpg') center/cover no-repeat;
}
.fade-bg::before {
content: '';
position: absolute;
inset: 0;
background: url('b.jpg') center/cover no-repeat;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.fade-bg:hover::before {
opacity: 1;
}
响应式下的坑与处理
在媒体查询中改宽高时，容易破坏过渡稳定性：
- 避免在
@media里只改width却漏掉height，导致容器尺寸跳变 -
object-fit: cover必须配显式width和height，否则 Safari 和 Firefox 对height: autofallback 行为不一致 - IE10/11 中
opacity动画卡顿明显，多图并行时尤其严重；降级方案是用@supports (transition: opacity)检测，不支持就直接切换 - 频繁切换的容器可加
will-change: opacity，但别全局滥用——它会强制新建合成层，内存开销明显
真正难的不是写出过渡代码，而是确保每张图都在切换前完成加载、容器不重排、不同屏幕下尺寸行为一致。这些细节没控住，动画再顺也显得毛刺。
