Warum wird mein SVG-Hintergrundbild in Firefox-Pseudoelementen nicht angezeigt?

SVG-Hintergrundbild wird im Firefox-Pseudoelement nicht angezeigt

In CSS können Sie ein Hintergrundbild für ein Pseudoelement angeben, indem Sie den Hintergrund verwenden. Bildeigenschaft. Bei der Verwendung von Datenbildern, wie im Fall von SVG-Bildern, zeigt Firefox das Bild jedoch nicht korrekt an.

Ursache:

Die Ursache liegt in der Verwendung des Hash-Zeichens (#) in der Daten-URL. In einer URL ist das Hash-Zeichen reserviert, um den Anfang einer Fragment-ID anzuzeigen.

Lösung:

Um dieses Problem zu beheben, codieren Sie das Hash-Zeichen in den Daten URL durch Konvertieren in #. So geht's:

background-image: url('data:image/svg+xml;utf8,<svg version="1.1">

Durch die Codierung des Hash-Zeichens stellen Sie sicher, dass es korrekt als Teil der Daten-URL und nicht als Bezeichner innerhalb des Elements interpretiert wird. Diese Änderung sollte das Problem beheben und das SVG-Bild sollte korrekt als Hintergrund im Pseudoelement in Firefox angezeigt werden.

Das obige ist der detaillierte Inhalt vonWarum wird mein SVG-Hintergrundbild in Firefox-Pseudoelementen nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!