Pourquoi mon image d'arrière-plan SVG ne s'affiche-t-elle pas dans les pseudo-éléments Firefox ?

L'image d'arrière-plan SVG ne s'affiche pas dans le pseudo-élément Firefox

En CSS, vous pouvez spécifier une image d'arrière-plan pour un pseudo-élément en utilisant l'arrière-plan- propriété de l'image. Cependant, lors de l'utilisation d'images de données, comme dans le cas des images SVG, Firefox n'affiche pas correctement l'image.

Cause :

La cause première réside dans l'utilisation du caractère dièse (#) dans l’URL des données. Dans une URL, le caractère dièse est réservé pour indiquer le début d'un identifiant de fragment.

Solution :

Pour résoudre ce problème, encodez le caractère dièse dans les données URL en la convertissant en #. Voici comment procéder :

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

En codant le caractère de hachage, vous vous assurez qu'il est correctement interprété comme faisant partie de l'URL des données et non comme un identifiant au sein de l'élément. Ce changement devrait résoudre le problème et l'image SVG devrait s'afficher correctement en arrière-plan dans le pseudo-élément de Firefox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!