CSS 数据 URI 转换器
将图片或小文件转换为 CSS 数据 URI——即可获得可直接粘贴的 background-image 规则、url() 值、HTML <img> 标签和原始数据 URI。在您的浏览器中运行。
输入
Drop a file or browse
One file · any type
文件在本地读取 — 永远不会上传。
输出
CSS 规则
CSS url() 值
HTML <img> 标签
原始数据 URI
这对您有帮助吗？
使用此工具的更多方式
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-data-uri-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 数据 URI 转换器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
也可通过
使用指南
将小图片转换为可直接粘贴到样式表中的 CSS。上传文件即可获得四种现成输出：完整的 background-image 规则、单独的 url("data:…") 值、HTML <img> 标签以及原始数据 URI。
使用方法
- 放入一张图片（PNG、JPEG、GIF、WebP、SVG 或其他任何小型资源）。
- 设置规则要作用的 CSS 选择器，并可选填
<img>标签的alt文本。 - 复制所需的代码片段。
何时内联图片
内联可以节省一次 HTTP 请求，对小图标、图案和占位图很有帮助。Base64 会使体积增加约 33%，且资源无法再单独缓存，因此仅适用于几 KB 的文件——更大的文件请使用普通的外链文件。
隐私
文件由您的浏览器读取并在本地转换；文件永远不会被上传。
相关工具
如果只需要原始字符串，请使用 Data URI 生成器 或 文件转 Base64。如需将 Base64 转回文件，请使用 Base64 转文件。
cssdata uribackground-imagebase64image to cssinline imagehtml img