Heim >Web-Frontend >CSS-Tutorial >Wie bette ich Base64-kodierte PNG-Bilder in CSS-Daten-URIs ein?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-02 06:02:02852Durchsuche

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>

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!

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