如何在CSS变量中存储和调用Base64编码的数据？-css教程-PHP中文网

css变量不能直接存储base64图片并用于background-image或content，因其仅保存字符串且不解析url()语法，导致多层引号包裹和图片失效；正确做法是变量存纯路径、属性中用url(var(--x))调用，或改用js注入、构建时内联等方案。

如何在css变量中存储和调用base64编码的数据？

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) 直接参与样式计算：

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

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

下载

构建时内联：用 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 解码失败