Pourquoi mon image ne s'affiche-t-elle pas dans Firefox lors de l'utilisation de la propriété CSS `content` ?

Problème d'affichage des images du navigateur Firefox

Dans le but d'afficher une image dans une classe CSS, la propriété content a été utilisée :

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

Bien que cette approche se soit avérée efficace pour restituer l'image sur Google Chrome et Safari, un problème inattendu est apparu dans Firefox : l'image n'a pas réussi à display.

Résolution :

Le problème réside dans l'implémentation par Firefox de la propriété content, qui est principalement compatible avec les pseudo-éléments ::before et ::after. Pour remédier à la situation, le code CSS peut être modifié comme suit :

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

En utilisant le pseudo-élément ::before, vous pouvez également afficher avec succès l'image dans Firefox. Reportez-vous au lien de documentation fourni pour plus d'informations sur l'utilisation de la propriété de contenu :

http://www.htmldog.com/reference/cssproperties/content/

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!