Pourquoi mon image CSS `content: url()` ne s'affiche-t-elle pas dans Firefox ?

Firefox n'affiche pas l'image de l'URL du contenu

En CSS, la propriété content vous permet d'insérer du contenu dans un élément, comme une image . Cela peut être utile pour créer des icônes personnalisées ou des éléments décoratifs. Cependant, des utilisateurs ont rencontré un problème où l'image de l'URL du contenu ne s'affiche pas dans le navigateur Firefox.

Pour résoudre ce problème, il est essentiel de comprendre que la propriété content fonctionne en conjonction avec des pseudo-éléments, tels que : :avant et ::après. Dans l'exemple fourni :

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

La propriété content est appliquée directement à la classe .googlePic, ce qui est incorrect. Pour que cela fonctionne dans Firefox, vous devez utiliser le pseudo-élément ::before. Voici le code corrigé :

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

En utilisant le pseudo-élément ::before, vous ajoutez le contenu de l'image avant le contenu réel de l'élément. Cela garantit que l'image s'affiche correctement dans Firefox. N'oubliez pas que la propriété content ne fonctionne qu'avec des pseudo-éléments.

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!