CSS transition 不响应 background-image 变化，因图像不可插值；应使用伪元素+opacity 或预加载图片实现淡入淡出。
background-image 多层切换不触发 transition？
CSS 的 transition 默认不会响应 background-image 的变化——哪怕你写了 transition: background-image 0.3s，浏览器也直接忽略。这不是 bug，是规范行为：图像资源加载、解码、绘制过程不可插值，浏览器无法在两张图之间“渐变”。所以想靠改 background-image 值实现淡入淡出，根本走不通。
实操建议：
- 用
background-image+background-position或opacity配合伪元素/额外容器做视觉层叠，真正可过渡的是opacity、transform或background-position - 若必须换图，把新图预加载进内存（比如用
new Image().src = "..."），再切换类名或内联样式，避免白屏卡顿 - 多背景写法如
background-image: url(a.jpg), url(b.jpg)是静态叠加，不能单独控制某一层的显隐或过渡，别指望它能“逐层 fade”
用两个 ::before 伪元素实现双图交叉淡入
这是最可控、兼容性好（IE11+）、无需 JS 的方案：让两层背景各占一个伪元素，通过 opacity 控制显隐，transition 绑定在 opacity 上即可生效。
常见错误现象：只用一个元素 + 多背景，试图靠改 background-image 切换，结果毫无动画；或者忘了给伪元素设 content: "" 和 position: absolute，导致不渲染。
立即学习“前端免费学习笔记（深入）”；
使用场景：轮播 Banner、主题皮肤切换、hover 悬浮图替换。
示例关键片段：
div {
position: relative;
}
div::before,
div::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
transition: opacity 0.4s ease;
}
div::before {
background-image: url("a.jpg");
z-index: 1;
}
div::after {
background-image: url("b.jpg");
z-index: 2;
opacity: 0;
}
div:hover::before { opacity: 0; }
div:hover::after { opacity: 1; }JS 监听 class 切换后触发动画，但图片没加载完就闪一下？
这是典型资源时序问题：class 切换瞬间，新背景图还没解码完成，浏览器先渲染空白或上一帧缓存，等图加载完才突然出现，破坏过渡连贯性。
实操建议：
- 提前用
new Image().src = "url"预加载所有待切换图片，等onload触发后再允许用户交互 - 给伪元素加
will-change: opacity（仅需动画期间设置），提升合成层优先级，减少闪烁 - 避免在
:hover中直接写background-image，应预先定义好 class，靠 JS 切换 class 名而非内联 style - 检查是否启用了
background-blend-mode——它会强制重绘整层，可能干扰 opacity 过渡节奏
多背景中某一层要平移+缩放，另一层固定，怎么写才不冲突？
CSS 多背景语法里，background-position、background-size 等属性都支持逗号分隔的多值写法，一一对应各层顺序。但要注意：这些值必须数量一致，否则后面层会回退到默认值（比如 background-position: 0 0, center 是合法的；但 background-position: 0 0 只写一个，则第二层用 0 0 而非 center）。
性能影响：每多一层背景，GPU 纹理上传和采样开销略增；若某层用了 background-attachment: fixed，还可能触发额外的合成层创建。
参数差异示例：
div {
background-image: url("layer1.png"), url("layer2.png");
background-position: 50% 50%, 0 0; /* layer1 居中，layer2 左上 */
background-size: cover, 200px 200px; /* layer1 自适应，layer2 固定尺寸 */
background-repeat: no-repeat, repeat-x; /* layer1 不重复，layer2 X轴重复 */
}容易踩的坑：用 background 复合属性重写时，会覆盖全部层的其他设置（比如只写 background: url(a.jpg)，则整个多背景被清空）；务必用单属性分别控制。
复杂点在于图层语义和加载时序的耦合——你得自己管哪张图该什么时候加载、哪张图该响应哪个事件、哪张图动哪张图静。浏览器不会帮你拆解“多背景”里的逻辑层级，它只认最终渲染树里的节点和样式。
