CSS变量无法直接用于background-image的url()函数，因url()需解析确定值而变量属运行时计算；须用JS读取变量并拼入内联样式，或通过伪元素+content实现纯CSS切换。
background-image 无法直接绑定 CSS 变量？
不是不能，而是写法有硬性限制：background-image 的 url() 函数内部不解析 CSS 变量。你写成 background-image: url(var(--img-url)); 会直接失效，浏览器当成无效值丢弃，回退到默认背景或透明。
根本原因是 CSS 函数（如 url()、calc()）在解析阶段就要求参数是确定值，而变量是运行时才计算的——二者生命周期不匹配。
用 element.style 或 setProperty 动态设背景图
真正能生效的方式，是绕过声明式 CSS，用 JS 把变量值拼进 url() 字符串，再写入内联样式。CSS 变量只负责“存值”，JS 负责“组装并注入”。
- 定义变量：
:root { --card-img: "/img/1.jpg"; } - JS 中读取并设置：
el.style.backgroundImage = `url(${getComputedStyle(document.documentElement).getPropertyValue('--card-img').trim()})`; - 换图时只需改变量值 + 触发重设：
document.documentElement.style.setProperty('--card-img', '/img/2.jpg');，再调一次上面那行 JS
用 @property + background-image 实现动画过渡？
不行。@property 虽然能让 CSS 变量支持类型声明和动画，但 background-image 本身不支持过渡（transition）或动画（animation），无论变量是否可动画。浏览器根本不触发重绘逻辑。
立即学习“前端免费学习笔记（深入）”；
想实现淡入淡出等效果，得用两层元素叠加 + opacity 动画，或者用 mask-image 配合渐变做遮罩切换 —— 本质是用其他可动画属性“模拟”背景切换。
为什么不用 content + ::before？
可以，而且更稳定：把图片塞进伪元素，用 z-index 压在卡片底层，再对伪元素的 opacity 或 transform 做动画。好处是完全不依赖 JS，纯 CSS 控制。
- 结构干净：
.card { position: relative; }，.card::before { content: ''; position: absolute; inset: 0; background-image: url(/img/1.jpg); background-size: cover; } - 换图只需改伪元素的
background-image值（通过类名切换或 JS 修改style） - 注意：伪元素必须设
content: ''，否则不渲染；且需显式设background-size和background-position，否则可能拉伸变形
