如何在没有外部文件的情况下将 PNG 图像直接嵌入到 HTML 中？

将 PNG 图像嵌入 HTML 页面

将 PNG 图像嵌入到 HTML 页面而不链接到图像文件的任务引发了问题: 如何将图像数据直接合并到 HTML 中？

使用 Base64 编码嵌入

Base64 编码提供了将图像嵌入 HTML 的解决方案。有多种在线 Base64 编码器可用，但建议使用强大的编码器，例如 http://www.greywyvern.com/code/php/binary2base64 中的编码器。

此工具提供两个主要嵌入选项：使用 CSS 或

CSS嵌入

在CSS中，嵌入可以通过如下方式实现：

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

标签嵌入

或者，标签可以使用：

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

利用Base64编码，可以将PNG图片直接嵌入到HTML页面中，无需外部图片文件即可显示图片。

以上是如何在没有外部文件的情况下将 PNG 图像直接嵌入到 HTML 中？的详细内容。更多信息请关注PHP中文网其他相关文章！