css - 如何在 HTML 中编码图像？

Question

如何在 HTML 中编码背景图像？例子：

background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX);

如果我有一个图像文件，如何对其内容进行编码，然后将其转换为字符串？这和那些自定义字体服务一样吗？

score 4 · Accepted Answer

您可以使用此网站转换您的图像：

并像这样使用它：

(X)HTML 图片嵌入示例

<img alt="Embedded Image" width="158" height="158" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A..." />

CSS 图像嵌入示例

div.image {
  width:158px;
  height:158px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...);
}

XML 图像嵌入示例

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...</url>
</image>

嵌入其他东西！

数据 URI 可以潜在地存储任何类型的数据，而不仅仅是图像！试试这些例子：(X)HTML CSS Embedding Example

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

(X)HTML Javascript 嵌入示例

<script type="text/javascript"
  src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

1 回答 1