如何将 .png 图像直接嵌入到 HTML 文档中而不链接到外部文件？

将 .png 图像嵌入 HTML 页面

如何将 .png 文件嵌入到空白的“file.html”文档中以便在任何浏览器中打开文件时显示图像，而无需从 HTML 代码链接到该文件？

答案：

将图像嵌入到 HTML 中而不需要链接，利用在线 Base64 编码器。推荐的选项是http://www.greywyvern.com/code/php/binary2base64。

嵌入图像有两种主要方法：

• CSS：

div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}

• 标签：

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" />

在这两种情况下，将 替换为与 Base64 编码器的输出。

以上是如何将 .png 图像直接嵌入到 HTML 文档中而不链接到外部文件？的详细内容。更多信息请关注PHP中文网其他相关文章！