Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie bette ich Base64-kodierte PNG-Bilder in CSS-Daten-URIs ein?

Linda Hamilton
Freigeben: 2024-11-02 06:02:02
Original
798 Leute haben es durchsucht

How to Embed Base64-Encoded PNG Images in CSS Data-URIs?

Base64-kodierte PNG-Bilder in CSS-Daten-URIs einbetten

Um ein PNG-Bild mithilfe einer Daten-URI direkt in eine CSS-Datei einzubetten , es muss Base-64-kodiert sein. So geht's:

Python-Lösung:

<code class="python">import base64

# Read the PNG file as binary
filepath = "path/to/image.png"
binary_fc = open(filepath, 'rb').read()

# Base-64 encode the binary data
base64_utf8_str = base64.b64encode(binary_fc).decode('utf-8')

# Get the file extension
ext = filepath.split('.')[-1]

# Create the data-uri
dataurl = f'data:image/{ext};base64,{base64_utf8_str}'</code>
Nach dem Login kopieren

Hinweise:

  • Die Daten- uri muss den Bildtyp und das Base64-Präfix enthalten: data:image/{ext};base64,.
  • Der Schritt decode('utf-8') ist erforderlich, um mit bestimmten Browsern und Encodern zu arbeiten.

Das obige ist der detaillierte Inhalt vonWie bette ich Base64-kodierte PNG-Bilder in CSS-Daten-URIs ein?. 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