Ist ein relativer Pfad in einer CSS-Datei relativ zur CSS-Datei?

Beim Arbeiten mit CSS, Verweisen auf externe Dateien wie Bilder und andere CSS-Dateien sind eine gängige Praxis. Das Verständnis des relativen Pfads dieser Referenzen ist für den richtigen Speicherort der Datei von entscheidender Bedeutung.

Relativer Pfad in CSS: Ein genauerer Blick

Ein relativer Pfad in einer CSS-Datei ist relativ zu die CSS-Datei selbst, nicht die HTML-Datei, die die CSS-Datei verwendet. Das bedeutet, dass Sie bei der Angabe eines Pfads für ein Bild oder eine andere Datei einen Pfad angeben müssen, der bei dem Verzeichnis beginnt, in dem sich die CSS-Datei befindet.

Verstehen anhand eines Beispiels

Um dieses Konzept zu veranschaulichen, betrachten Sie das folgende Layout:

• Seite: page.htm (Speicherort: Spielt keine Rolle)
• CSS: /resources/css/styles. css
• Bild: /resources/images/image.jpg

In der CSS-Datei (styles.css):

div {
  background-image: url('../images/image.jpg');
}

In diesem Beispiel beginnt der Pfad zum Bild (image.jpg) in der CSS-Datei mit ../. Dies bedeutet, dass Sie vom Speicherort der CSS-Datei (styles.css) ein Verzeichnis nach oben gehen und dann zum Bilderverzeichnis navigieren, in dem das Bild gespeichert ist.