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 负责“组装并注入”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 定义变量：: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，否则可能拉伸变形

CSS 变量本身不触发重绘，背景图切换的本质是“替换 URL 字符串 + 强制样式重计算”。很多人卡在以为设了变量就自动更新，其实漏掉了那个关键的 JS 注入或类名切换动作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！