background-image: url(attr(data-bg)) 不生效，因 attr() 在该属性中未被浏览器支持；正确做法是用 JavaScript 读取 data-bg 值并赋给 style.backgroundImage，或通过 CSS 变量中转（需注意 Safari 15.4+ 兼容性）。
data-* 属性里存路径，但 background-image: url(attr(data-bg)) 不生效
直接在 CSS 里写 background-image: url(attr(data-bg)) 是无效的——attr() 函数在 background-image 中不被支持（CSS Values and Units Level 4 草案中曾提过，但至今无主流浏览器实现）。你看到页面没图、控制台也没报错，只是这条声明被静默忽略。
真正能走通的链路是：把 data-bg 当作 JS 的输入源，读出来拼成完整 url() 字符串，再写进 style.backgroundImage。
- HTML 中设好属性：
<div data-bg="/img/card-1.jpg" class="card"></div> - JS 里读取并注入：
const el = document.querySelector('.card'); const path = el.dataset.bg; el.style.backgroundImage = `url(${path})`; - 后续换图只需改
dataset.bg+ 重设样式，无需操作 CSS 变量或 class
用 CSS 变量中转 data-* 值，再在 background-image 里引用
想保留纯 CSS 控制流？可以，但必须绕开 attr()。做法是用 JS 把 data-bg 值同步到一个 CSS 变量，再在样式里用 url(var(--bg-path)) 拼接。
注意 Safari 15.4+ 才支持 url(var(--x))，旧版 Safari 或部分安卓 WebView 会直接跳过整条规则，背景变空白。
立即学习“前端免费学习笔记（深入）”；
- 先定义变量容器：
:root { --bg-path: "/img/default.jpg"; } - JS 同步值：
document.documentElement.style.setProperty('--bg-path', el.dataset.bg); - CSS 中使用：
.card { background-image: url(var(--bg-path)); } - 别写成
--bg-path: "url(/img/1.jpg)";—— 变量里只存路径字符串，url()必须留在属性声明里
动态切换时图片闪一下，或加载延迟明显
这不是 CSS 写法问题，而是资源加载时机导致的视觉断层。浏览器不会预加载 url(var(--x)) 里的路径，新路径首次触发时才发起请求，期间背景可能短暂透明或回退到父级背景色。
- 关键纹理提前预加载：
<link rel="preload" as="image" href="/img/card-2.jpg"> - 避免用相对路径做动态切换（比如
./img/1.jpg），统一用根路径（/img/1.jpg）减少解析歧义 - 如果要过渡效果，
background-image本身不支持动画，得用两层元素：底层固定旧图 + 上层淡入新图，靠opacity动画实现 - 快速连点切换时，可加节流：
if (isChanging) return; isChanging = true; setTimeout(() => isChanging = false, 300);
Vue / React 等框架里绑定 data-bg，为什么 background-image 还是不更新
框架的数据响应式只管 DOM 属性和文本内容，dataset 改变不会自动触发 style.backgroundImage 重算。你改了 data-bg，但没人去读它、没人去调 el.style.backgroundImage = ...。
正确姿势是把路径作为响应式数据，通过计算属性或 useEffect/watch 驱动样式更新。
- Vue 示例：
<div :style="{ backgroundImage: `url(${currentBgPath})` }"></div> - React 示例：
style={{ backgroundImage: `url(${currentBgPath})` }} - 不要依赖
data-bg作为唯一信源；它适合存配置元信息，不适合当运行时状态总线
实际项目里最稳的路径就一条：JS 控制变量 → 拼接 url() → 直接写内联样式。CSS 变量中转虽优雅，但兼容性和加载控制更难兜底。尤其当你需要精确控制预加载、错误降级、加载状态反馈时，硬编码 url(...) 反而最透明。
