Warum wird mein Bild in Firefox nicht angezeigt, wenn ich die CSS-Eigenschaft „content' verwende?

Problem mit der Bildanzeige im Firefox-Browser

Bei dem Versuch, ein Bild innerhalb einer CSS-Klasse anzuzeigen, wurde die Content-Eigenschaft verwendet:

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

Während sich dieser Ansatz beim Rendern des Bildes in Google Chrome und Safari als effektiv erwies, trat in Firefox ein unerwartetes Problem auf: Das Bild konnte nicht angezeigt werden Anzeige.

Lösung:

Das Problem liegt in der Firefox-Implementierung der Content-Eigenschaft, die hauptsächlich mit den Pseudoelementen ::before und ::after kompatibel ist. Um Abhilfe zu schaffen, kann der CSS-Code wie folgt geändert werden:

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

Durch die Verwendung des Pseudoelements ::before können Sie das Bild auch in Firefox erfolgreich anzeigen. Weitere Einblicke in die Verwendung der Inhaltseigenschaft finden Sie unter dem bereitgestellten Dokumentationslink:

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

Das obige ist der detaillierte Inhalt vonWarum wird mein Bild in Firefox nicht angezeigt, wenn ich die CSS-Eigenschaft „content' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!