Warum wird mein CSS-Bild „content: url()' in Firefox nicht angezeigt?

Firefox zeigt kein Inhalts-URL-Bild an

In CSS können Sie mit der Content-Eigenschaft Inhalte in ein Element, beispielsweise ein Bild, einfügen . Dies kann zum Erstellen benutzerdefinierter Symbole oder dekorativer Elemente nützlich sein. Benutzer sind jedoch auf ein Problem gestoßen, bei dem das Inhalts-URL-Bild nicht im Firefox-Browser angezeigt wird.

Um dieses Problem zu beheben, ist es wichtig zu verstehen, dass die Inhaltseigenschaft in Verbindung mit Pseudoelementen funktioniert, wie zum Beispiel: :vorher und ::nachher. Im bereitgestellten Beispiel:

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

Die Content-Eigenschaft wird direkt auf die .googlePic-Klasse angewendet, was falsch ist. Damit es in Firefox funktioniert, müssen Sie das Pseudoelement ::before verwenden. Hier ist der korrigierte Code:

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

Durch die Verwendung des Pseudoelements ::before fügen Sie den Bildinhalt vor dem eigentlichen Inhalt des Elements hinzu. Dadurch wird sichergestellt, dass das Bild in Firefox korrekt angezeigt wird. Denken Sie daran, dass die Content-Eigenschaft nur mit Pseudoelementen funktioniert.

Das obige ist der detaillierte Inhalt vonWarum wird mein CSS-Bild „content: url()' in Firefox nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!