Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich in CSS einen Hintergrundbildpfad korrekt angeben, wenn sich meine CSS-Datei und mein Bild in unterschiedlichen Verzeichnissen befinden?

Susan Sarandon
Freigeben: 2024-11-12 10:01:02
Original
662 Leute haben es durchsucht

How do I correctly specify a background image path in CSS when my CSS file and image are in different directories?

Hintergrundbildpfad in CSS angeben

In CSS erfordert das Festlegen eines Hintergrundbilds die Angabe des Dateipfads. Die folgende Abfrage soll das Problem lösen, angesichts der Organisationsstruktur des Projekts den richtigen Pfad zum Bild zu finden.

Problem:
Die CSS-Datei des Benutzers befindet sich unter Projekt/ Web/Support/Styles/file.css, während das Bild, das sie verwenden möchten, unter Project/Web/images/image.png zu finden ist. Sie haben mehrere Methoden ausprobiert, um die Eigenschaft „Hintergrundbild“ festzulegen, haben aber nicht das gewünschte Ergebnis erzielt.

Lösung:
Um den Pfad zum Bild in CSS korrekt anzugeben, den relativen Der Pfad aus der CSS-Datei muss berücksichtigt werden. In diesem Fall befindet sich die CSS-Datei zwei Ordner oberhalb des Bilderverzeichnisses. Daher sind im Pfad zwei Präfixe ../ (übergeordnetes Verzeichnis) erforderlich:

background-image: url('../../images/image.png');
Nach dem Login kopieren

Durch das Durchlaufen zweier Verzeichnisse lokalisiert die CSS-Datei das Bild korrekt innerhalb der Projektstruktur.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen Hintergrundbildpfad korrekt angeben, wenn sich meine CSS-Datei und mein Bild in unterschiedlichen Verzeichnissen befinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage