如何在HTML中编码图像？

Question

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

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

如果我有一个图像文件，我如何编码其内容然后将其转换为字符串？这与自定义字体服务的作用相同吗？

Answer 1

您可以使用以下网站转换图片：

http://www.greywyvern.com/code/php/binary2base64

并使用它：

（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嵌入示例

<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>