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="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" 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 必须完全一致，否则淡入时会出现错位闪动。
