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 必须完全一致，否则淡入时会出现错位闪动。
