Heim  >  Artikel  >  Backend-Entwicklung  >  Wie kann ich PNG-Bilder direkt in HTML einbetten?

Wie kann ich PNG-Bilder direkt in HTML einbetten?

Linda Hamilton
Linda HamiltonOriginal
2024-10-29 09:42:30751Durchsuche

How Can I Embed PNG Images Directly into HTML?

PNG-Bilder direkt in HTML integrieren

Das Einbetten von PNG-Bildern in HTML ermöglicht die direkte Anzeige im Browser ohne externe Dateireferenzierung. Um dies zu erreichen, verwenden Sie die Base64-Kodierungstechnik:

Base64-Kodierung des PNG-Bildes:

Verwenden Sie Online-Encoder, um das PNG-Bild in eine Base64-Zeichenfolge zu konvertieren. Diese Zeichenfolge stellt die binären Bilddaten im Textformat dar.

Base64-Zeichenfolge in HTML integrieren:

CSS-Option:

Definieren Sie eine CSS-Klasse für das Bild und legen Sie die Eigenschaft „Hintergrundbild“ mithilfe der Funktion url() und der Base64-Zeichenfolge fest. Zum Beispiel:

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

Bild-Tag-Option:

Alternativ können Sie die Base64-Zeichenfolge direkt in das einbetten. tag:

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

Dadurch wird das PNG-Bild in ein Daten-URI-Schema konvertiert, das es dem Browser ermöglicht, das Bild direkt zu interpretieren und anzuzeigen.

Das obige ist der detaillierte Inhalt vonWie kann ich PNG-Bilder direkt in HTML einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn