CSS变量不能直接存储Base64图片并用于background-image或content，因其仅保存字符串且不解析url()语法，导致多层引号包裹和图片失效；正确做法是变量存纯路径、属性中用url(var(--x))调用，或改用JS注入、构建时内联等方案。
var(--icon) 不能直接用于 background-image 或 content 中显示 Base64 图片——CSS 自定义属性只存字符串，不解析 url() 语法，强行使用会导致图片空白、控制台无报错、DevTools 显示双层 url("url(data:...)")。
为什么 --icon: url(data:image/png;base64,...) 不生效
CSS 变量（--xxx）本质是字符串容器，浏览器不会在赋值时执行任何语法解析。当你写：
body { --icon: url(data:image/svg+xml;base64,PHN2Zz48Y2lyY2xlLz48L3N2Zz4=); }
再用：
.btn { background-image: var(--icon); }
浏览器实际渲染的是字面量 url("url(data:image/svg+xml;base64,...)")，多套一层 url() 和引号，根本无法解码。
- DevTools 中
background-image值显示为带双引号的原始字符串，不是资源 URL -
getComputedStyle(el).backgroundImage返回的是"url(\"url(data:...)\")"，而非可加载路径 - 伪元素
::before { content: var(--svg) }同样只输出字符串，不触发 Base64 解码
哪些地方能“看起来像”用了变量，但其实绕开了 CSS 变量机制
真正起效的方式，都避开了 var(--xxx) 直接参与样式计算：
立即学习“前端免费学习笔记（深入）”；
- 构建时内联：用 Webpack/Vite 插件（如
vite-plugin-css-vars）把 Base64 字符串注入到生成的 CSS 中，最终产出的是硬编码的background-image: url(data:image/...) - JS 动态设置：读取变量值后拼成完整样式，
el.style.backgroundImage = `url(${iconBase64})`，绕过 CSS 解析阶段 - SVG Sprite +
id引用：把 SVG Base64 解码后转成内联<svg><symbol id="icon-home">...</symbol></svg>，再用background-image: url(#icon-home)（需同域） - SVG URL 编码替代 Base64：用
encodeURIComponent处理原始 SVG 字符串，配合data:image/svg+xml;charset=utf-8,前缀，此时可安全存入变量并用于background-image: var(--svg-url)
如果坚持用 CSS 变量存 Base64 字符串，必须满足什么条件
仅适用于极少数场景，且需手动补全语法结构：
- 变量值只能存纯 Base64 字符串（不含
data:image/...;base64,前缀），例如--svg-data: PHN2Zz48Y2lyY2xlLz48L3N2Zz4= - 使用处必须显式拼接前缀：
background-image: url(data:image/svg+xml;base64,var(--svg-data))—— 但注意：**这在标准 CSS 中非法**，url()内部不支持嵌套var() - 唯一可行路径是 JS 注入：
document.documentElement.style.setProperty('--svg-url', 'data:image/svg+xml;base64,' + data)，再在 CSS 中写background-image: var(--svg-url) - 所有方案都要避开换行、空格、未转义 XML 字符（如
、<code>&），否则 Base64 解码失败
大图或动态内容千万别走 Base64 + CSS 变量这条路
你看到的“7.1MB 接口响应耗时 16 秒”，往往就来自几十条新闻里混着 1MB 的 Base64 图片字段。CSS 变量本身不放大体积，但诱使开发者把本该走 CDN 或文件服务的资源硬塞进样式系统——结果是：CSS 文件暴涨、首屏阻塞、缓存失效、调试困难。
真正该问的不是“怎么让变量存 Base64”，而是“这张图是否真需要内联？它的更新频率、尺寸、复用范围是否允许它脱离 HTTP 缓存？”——多数时候答案是否定的。
