background-image 不支持 transition，需用双层背景+opacity 模拟渐变切换；推荐伪元素 ::before 承载第二张图并过渡 opacity；单图 background-position 仅适用于位移，不能换图。
background-image 本身不支持 transition
直接对 background-image 属性加 transition 是无效的，浏览器会忽略。这是 css 规范限制——background-image 不是可动画属性。想实现“切换有渐变效果”，必须绕过这个限制，用可过渡的属性来模拟。
用两个 background-layer + opacity 交叠过渡
核心思路：在同一元素上叠加两层背景（通过 background-image 的多值语法），再用 opacity 控制其中一层的显隐。由于 opacity 支持 transition，就能做出淡入淡出效果。
常见错误是只写一个 background-image 然后试图切换它；正确做法是预先定义好两套背景图，靠类名切换控制哪一层透明为 0：
.bg-switcher { background-image: url('bg1.jpg'), url('bg2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } <p>.bg-switcher.layer-1 { background-image: url('bg1.jpg'), url('bg2.jpg'); /<em> 第二层透明度为 0 </em>/ --bg2-opacity: 0; transition: --bg2-opacity 0.6s ease; }</p><p>.bg-switcher.layer-2 { --bg2-opacity: 1; transition: --bg2-opacity 0.6s ease; }</p><p>/<em> 用伪元素或额外 div 实现分层更稳妥（见下条） </em>/</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1978" title="Timebolt"><img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d0650bc91670.png" alt="Timebolt" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1978" title="Timebolt">Timebolt</a> <p>视频静态过滤器，可以快速自动删除沉默镜头</p> </div> <a href="/ai/1978" title="Timebolt" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>更可靠：用伪元素 ::before 模拟第二层背景
上面方法依赖 CSS 自定义属性配合 opacity，但部分老浏览器不支持 --var 动画。更兼容、更可控的方式是用 ::before 伪元素承载第二张背景图，并单独控制其 opacity：
- 主元素保持第一张背景图和内容
-
::before绝对定位覆盖全区域，设第二张背景图 + 初始opacity: 0 - 切换时给伪元素加类，
opacity: 1，并声明transition: opacity
.bg-container { position: relative; background: url('bg1.jpg') center/cover no-repeat; } <p>.bg-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('bg2.jpg') center/cover no-repeat; opacity: 0; transition: opacity 0.5s ease; }</p><p>.bg-container.fade-in::before { opacity: 1; }</p>注意：伪元素默认无尺寸，必须设 content: '' + 定位 + 尺寸约束，否则背景不显示。
background-position 过渡只能动「同一张图」的视口
如果只是想让一张大图缓慢平移（比如 banner 图横向滚动感），那 background-position 确实可 transition，但它无法实现「换图」——你看到的始终是同一张图的不同区域。误以为它能切换图片，是常见误解。
示例（仅适用于单图位移）：
.panning-bg { background: url('panorama.jpg') 0 0 / 200% 100% no-repeat; transition: background-position 2s ease; } <p>.panning-bg:hover { background-position: 100% 0; }</p>真正要换图+渐变，还是得回到双层 + opacity 的路子。最容易被忽略的是：两张背景图的 background-size 和 background-position 必须完全一致，否则淡入时会出现错位闪动。