如何在沒有外部文件的情況下將 PNG 圖像直接嵌入到 HTML 中？

將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中文網其他相關文章！