Wie verweise ich auf eine Bilddatei in einer CSS-Hintergrunddeklaration, wenn sich Ihre CSS-Datei in einem Unterverzeichnis befindet?

Einrichten des Hintergrundbildpfads in CSS

In diesem Artikel untersuchen wir die Methoden zum Referenzieren einer Bilddatei in einer CSS-Hintergrunddeklaration.

Kontext

Ein Entwickler ist auf ein Problem gestoßen, bei dem sein Hintergrundbild nicht auf ein Element angewendet wurde. Ihre CSS-Datei befand sich im Verzeichnis Project/Web/Support/Styles/file.css und das Bild im Verzeichnis Project/Web/images/image.png.

Fehlgeschlagene Versuche

Der Entwickler hat mehrere Pfadvarianten erfolglos ausprobiert:

background-image: url(/images/image.png);
background-image: url('/images/image.png');
background-image: url("images/image.png");
background-image: url(../images/image.png);
background-image: url('../images/image.png');
background-image: url("..images/image.png");

Lösung

Die Lösung liegt in unter Berücksichtigung des Kontexts des CSS-Dateispeicherorts. In diesem Fall liegt die CSS-Datei zwei Ebenen tiefer als die Bilddatei. Um das Bild korrekt zu referenzieren, sollte der Pfad daher zwei Instanzen von „..“ verwenden, was den Durchlauf um zwei Ebenen in der Verzeichnisstruktur darstellt:

background-image: url('../../images/image.png');

Jetzt wird das Hintergrundbild wie erwartet in angewendet die Webseite.

Das obige ist der detaillierte Inhalt vonWie verweise ich auf eine Bilddatei in einer CSS-Hintergrunddeklaration, wenn sich Ihre CSS-Datei in einem Unterverzeichnis befindet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!