background-image不能直接transition，因css规范禁止其插值，浏览器静默忽略；必须用双层伪元素+opacity过渡实现平滑切换，并配合预加载、固定尺寸与媒体查询适配。
background-image 不能直接 transition，别白费劲写这个
直接给 background-image 加 transition 是无效的。CSS 规范明确将其列为不可动画属性，Chrome 静默忽略，Firefox 和 Safari 表现不一致——你看到的“动了”，大概率是重绘抖动，不是真实插值。所有试图靠 transition: background-image 0.3s 实现淡入淡出的写法，上线后都会在某个设备上闪一下或完全不动。
用双层 + opacity 是最稳的平滑切换方案
核心是让新旧图同时存在，只控制上层透明度。这不是权宜之计，而是目前兼容性最好、行为最可预测的方式：
- 容器必须设固定宽高（比如
height: 400px），不能用height: auto，否则opacity变化可能触发 layout 抖动 - 主图用
::before，备图用::after，都设position: absolute覆盖同一区域 - 备图初始
opacity: 0，并加transition: opacity 0.4s ease - 切换时同时改两层的
opacity：主图 → 0，备图 → 1；**不要等图片加载完再动样式**，那会闪白屏 - 务必预加载备图：
::after { content: url("banner-desktop.jpg"); visibility: hidden; }
响应式切换必须靠媒体查询 + 多组 background-image
image-set() 只认设备像素比（dpr），不响应视口宽度，根本做不到「小屏切小图、大屏切大图」。iPad Pro（2x）照样加载桌面 2x 图，1080p 笔记本（1x）也拿不到高清图——这不是 bug，是设计限制。
真正可控的做法是按断点分层覆盖：
- 从小到大顺序写媒体查询，否则小屏规则可能被大屏覆盖
- 每个断点内，
background-image指向构图适配的图（如移动端横版 banner、桌面端竖版 banner） - 保持所有断点下
background-size和background-position一致，避免跳变 - 若需 DPR 适配，可在每个断点内叠加
image-set()，但要接受 Firefox 不支持的事实
想滑动切换？别碰 background-position，用 transform 模拟
background-position 的 transition 在 Safari 基本无效，Chrome/Firefox 支持也不稳定。所谓“平滑位移”往往是父容器 transform 带动的错觉。
可靠做法是把背景图当子元素处理：
- 父容器设
position: relative; overflow: hidden; - 子图用
position: absolute，宽高设为200%，用transform: translate(-25%, -25%)对齐初始位置 - 过渡只改
transform，比如transform: translateX(-100px) - 避免用百分比做
translate值，它和background-position的百分比逻辑冲突；推荐用px或vw，必要时 JS 动态算
复杂点在于：平滑切换 ≠ 单一技术能包打天下。opacity 解决显隐，媒体查询解决构图，transform 解决位移——三者得按场景拆开用，混着写反而容易踩坑。最常被忽略的是预加载和固定尺寸，没这两条，再好的 transition 也会闪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
