background-image 不支持 transition，因其值不可插值；应拆分为多层伪元素，用 opacity 过渡并配合 transition-delay 实现错峰效果。
background-image 不能直接 transition？
对，background-image 属性本身不支持过渡动画，浏览器会直接跳变。哪怕你写了 transition: background-image 0.3s，也完全没效果——这不是写法问题，是 CSS 规范限制：只有可计算、可插值的属性才能过渡，而渐变（linear-gradient）或图片 URL 都不属于这类值。
用 background-layer 拆开 + opacity 过渡最稳
真正能落地的做法，是把多层背景拆成多个独立的伪元素或子元素，每层只负责一个背景图/渐变，再用 opacity 控制显隐。这样既能分层控制，又避开了 background-image 的硬伤。
- 主容器设
position: relative，各背景层用::before/::after或空<div> 覆盖，<code>position: absolute+inset: 0 - 每层只设一个
background-image或background（含渐变），不混用 - 过渡交给
opacity，配合transition-delay实现错峰入场 - 记得加
will-change: opacity（可选），避免部分浏览器重绘卡顿
div {
position: relative;
}
div::before,
div::after {
content: '';
position: absolute;
inset: 0;
}
div::before {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
opacity: 1;
transition: opacity 0.4s ease 0s;
}
div::after {
background: url(/img/texture.png);
opacity: 0;
transition: opacity 0.4s ease 0.2s; /* 延迟 0.2s */
}background-position 过渡能用，但有陷阱
如果你只是想让某一层背景“动起来”，比如平移、缩放，background-position 和 background-size 是少数几个能直接过渡的背景相关属性。但要注意：
- 必须用像素、百分比等可插值单位，
center、top left这类关键字不支持过渡 - 多层背景里，
background-position是按逗号顺序一一对应的，层数、顺序错一个就全乱 - 如果某层是渐变，它没有“位置”概念，
background-position对它无效 - 移动端 Safari 对多层
background-position过渡偶发闪烁，建议加transform: translateZ(0)强制 GPU 加速
别碰 background-blend-mode + transition 的组合
有人想靠 background-blend-mode 混合多层再统一过渡，这想法很诱人，但现实是：这个属性本身不支持过渡，且一旦和 opacity 或 background-position 混用，不同浏览器渲染行为差异极大，Chrome 可能正常，Firefox 可能卡顿，Safari 直接不触发重绘。
立即学习“前端免费学习笔记（深入）”；
真要混合效果，老实用两层带 opacity 的伪元素 + 合理的 z-index 控制叠序，比赌 blend-mode 稳定得多。
多层背景过渡本质是“用结构换可控性”，不是所有背景都适合塞进一个 background 声明里——越想一锅炖，越容易在 Safari 里看到闪屏或延迟一帧的错位。
