直接用 background-image 写 base64 数据 url 时，需严格遵循 data:;base64, 格式，确保 mime 类型准确、base64, 后无空格、url() 内用单引号包裹；仅适用于小图标，大图应走独立文件。
直接用 background-image 写 Base64 数据 URL
Base64 图片本质是把二进制图片编码成文本字符串，然后作为 data: 协议的 URL 使用。CSS 中只需把它塞进 background-image 的 url() 里即可，不需要额外 HTML 标签或 JS。
常见错误是漏掉 MIME 类型、空格或引号不匹配。正确格式必须包含：data:<mimetype>;base64,<encoded-string></encoded-string></mimetype>
- MIME 类型要准确，比如 PNG 是
image/png，JPEG 是image/jpeg（不是image/jpg） -
base64,和编码字符串之间**不能有空格** -
url()里建议用单引号包裹整个 data URL，避免 CSS 解析歧义
body {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==');
}
Base64 太长？别硬塞进 CSS 文件
内联 Base64 虽然免 HTTP 请求，但会显著增大 CSS 体积，且无法被浏览器缓存。如果图片大于 ~2KB，实际加载性能反而可能更差。
更合理的做法是：只对小图标（如 16×16 loading spinner、状态 icon）用 Base64；稍大图片仍走独立文件路径。
立即学习“前端免费学习笔记（深入）”；
- 超过 1KB 的 Base64 字符串会让 CSS 文件难以阅读和维护
- 构建工具（如 Webpack/Vite）可配置自动将小图转为 Base64，无需手动编码
- 若必须手动生成，推荐用命令行（
base64 -i icon.png | tr -d '\n'）或在线工具，注意去除换行符
HTML 元素内联 style 也能用，但慎用
在 style 属性里写 Base64 背景可行，但属于“能用但不该常用”的方案：
- 破坏样式与结构分离原则
- 重复使用时无法复用，每个元素都得粘贴一遍长字符串
- 服务端渲染或 SSR 场景下，可能因 HTML 转义导致 Base64 断裂（比如
+变成空格）
<div style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJyZWQiLz48L3N2Zz4=');"></div>
遇到背景不显示？优先检查这三点
Base64 背景失效，90% 是以下原因：
- 编码字符串里混入了不可见字符（如 Windows 换行符
\r\n），用console.log(encodedStr.length)或正则/[^A-Za-z0-9+/=]/g检查非法字符 - CSS 选择器权重太低，被其他
background-image覆盖（用浏览器 DevTools 看 computed styles 是否生效） - 图片尺寸为 0 或父容器没设宽高，导致背景区域不可见（加
background-size: cover或临时设border: 1px solid red排查）
真正嵌入成功的 Base64 背景，复制那段 data URL 到浏览器地址栏就能直接打开预览——这是最简单的验证方式。
