CSS变量不能直接存url()字符串，应只存路径片段并用url(var(--path))拼接；Safari 15.4+才支持该语法；需预加载、避免动态拼接、区分主题变量、规范SVG属性以确保纹理正常显示。
background-image 用 CSS 变量时路径不生效
直接把 url() 写进 --bg-texture 变量里，浏览器不会解析成背景图——CSS 变量只是字符串，background-image 不会自动执行字符串拼接或解析。
- 错误写法：
:root { --bg-texture: "url(/assets/wood.png)"; }+background-image: var(--bg-texture);→ 纯文本，无效 - 正确做法：变量只存路径片段（不含
url()和引号），再在属性里手动拼出完整url() - 推荐结构：
:root { --bg-path: "/assets/wood.png"; }，然后用background-image: url(var(--bg-path)); - 注意：Safari 15.4+ 才支持
url(var(--x))，旧版 Safari 和部分安卓 WebView 会忽略整条声明
切换纹理时页面闪烁或重绘异常
哪怕路径变了，浏览器也可能复用旧纹理缓存，尤其在快速切换或使用相对路径时；更常见的是新图片加载期间背景变白或透明，造成视觉跳变。
- 提前预加载关键纹理：
link rel="preload" as="image" href="/assets/brick.png" - 用
background-size: cover+background-repeat: no-repeat避免因尺寸计算延迟导致的重绘抖动 - 如果通过 JS 切换，别直接改
style.backgroundImage，优先操作 class 触发 CSS 过渡：element.classList.replace("theme-a", "theme-b") - 过渡动画仅对
opacity或background-color有效，background-image本身无法渐变，需用两层元素叠加以实现淡入效果
路径动态拼接失败（比如加版本号或主题前缀）
CSS 本身不支持字符串拼接，url(var(--base) + "?v=1.2") 是非法语法，会导致整条规则失效。
- 版本控制建议走构建工具（如 Vite 的
import.meta.env.BASE_URL注入），而非运行时拼接 - 若必须 JS 控制，用
element.style.backgroundImage = `url(${path}?v=${Date.now()})`，但要注意 XSS 风险（确保path来源可信） - 主题路径差异大时，分开定义变量更稳妥：
--bg-light: "/textures/light.svg"; --bg-dark: "/textures/dark.svg"，再用background-image: url(var(--bg-light));配合媒体查询或 class 切换
SVG 纹理作为 background-image 时缩放失真或渲染模糊
SVG 本身是矢量，但作为 background-image 被拉伸时，若未明确控制尺寸和渲染行为，可能被当作位图处理，尤其在高 DPR 屏幕上。
立即学习“前端免费学习笔记（深入）”；
- 强制启用矢量渲染：
background-size: 100% 100%; background-repeat: repeat;+ SVG 文件内移除width/height属性，保留viewBox - 避免在 SVG 中使用
px单位，改用em或无单位数值 - 如需响应式缩放，优先用
background-size: contain或固定比例值（如20px 20px），而不是cover或100%全铺 - 某些旧版 Chrome 对 inline SVG data URL 的
background-image支持不稳定，建议外链 SVG 文件
/ 开头、SVG 是否含 viewBox——这些细节在动态换纹理时不是可选项，而是决定它能不能正常显示的第一道门槛。 
