Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kodiere ich PNG-Bilder als Base64 für CSS-Daten-URIs?

Patricia Arquette
Freigeben: 2024-10-30 21:22:30
Original
980 Leute haben es durchsucht

How to Encode PNG Images as Base64 for CSS Data URIs?

Base64-Codierung für PNG-Bilder in CSS-Daten-URIs verwenden

Um PNG-Bilder mithilfe von Daten-URIs in CSS-Stylesheets einzubetten, werden die PNG-Daten benötigt muss zunächst in das Base64-Format kodiert werden. Mit dieser Technik können externe Bilddateien direkt in das Stylesheet eingebunden werden.

Unix-Befehlszeilenlösung:

base64 -i /path/to/image.png
Nach dem Login kopieren

Dieser Befehl gibt das Base64-codierte PNG aus Daten.

Python-Lösung:

<code class="python">import base64

with open("/path/to/image.png", "rb") as f:
    binary_data = f.read()

base64_data = base64.b64encode(binary_data).decode("utf-8")
ext = "png"

data_uri = f"data:image/{ext};base64,{base64_data}"

print(data_uri)</code>
Nach dem Login kopieren

Dieses Python-Skript liest die PNG-Datei im Binärmodus, konvertiert sie in Base64 und erstellt dann den Daten-URI, einschließlich den entsprechenden MIME-Typ und die entsprechende Erweiterung.

Zusätzliche Hinweise:

  • Stellen Sie sicher, dass die Erweiterung des Bildes im Daten-URI nach dem MIME-Typ enthalten ist, z. B. „data :image/png;base64".
  • Verwenden Sie die Methode „decode('utf-8')" in Python, um mögliche Probleme im Zusammenhang mit Unicode zu lösen.

Das obige ist der detaillierte Inhalt vonWie kodiere ich PNG-Bilder als Base64 für CSS-Daten-URIs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage