Wie gehe ich im src-Pfad einer URL in HTML eine Ebene höher?

101

Ich speichere Stylesheets in {root} / styles, während Bilder in {root} / images für eine Website. Wie gebe ich den Pfad in den Stylesheets an, um im Bilderverzeichnis nach den angegebenen Bildern zu suchen?

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

html css relative-path aateeque
quelle

Antworten:

184

Verwenden Sie ..diese Option , um das übergeordnete Verzeichnis anzugeben:

background-image: url('../images/bg.png');
einsamer Tag
quelle
Ich habe das auch woanders gelesen - aber es funktioniert nicht! (zumindest in Chrome)
aateeque
27
Es tut. Beachten Sie jedoch, dass der Speicherort relativ zum Speicherort der CSS-Datei ist und nicht das Dokument, in das die CSS-Datei eingebettet ist.
ThiefMaster
1
@ThiefMaster Es sollte sein, wenn wir nur Inline-CSS verwenden
1000 Gbit
56

Hier ist alles, was Sie über relative Dateipfade wissen müssen:

  • Beginnend mit / kehrt zum Stammverzeichnis zurück und beginnt dort

  • Beginnend mit ../ verschiebt sich ein Verzeichnis rückwärts und beginnt dort

  • Beginnend mit ../../ Verschiebt zwei Verzeichnisse rückwärts und beginnt dort (und so weiter ...)

  • Um fortzufahren , beginnen Sie einfach mit dem ersten Unterverzeichnis und fahren Sie fort.

Klicken Sie hier für weitere Details!

S.Akruwala
quelle
52

Verwendung ../:

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

Sie können das so oft verwenden, wie Sie möchten, z. B. ../../images/oder sogar an verschiedenen Positionen, z. B. ../images/../images/../images/(wie ../images/natürlich)

DiebMaster
quelle
9

Wenn Sie in Chrome eine Website von einem HTTP-Server laden, funktionieren sowohl absolute Pfade (z. B. /images/sth.png) als auch relative Pfade zu einem Verzeichnis der oberen Ebene (z ../images/sth.png. B. ).

Aber!

Wenn Sie (in Chrome!) Ein HTML-Dokument aus dem lokalen Dateisystem laden, können Sie nicht auf Verzeichnisse zugreifen, die über dem aktuellen Verzeichnis liegen. Das heißt, Sie können nicht darauf zugreifen ../something/something.sthund den relativen Pfad in absolut ändern, oder irgendetwas anderes hilft nicht.

jaboja
quelle
1
Bei erneuter Überprüfung kann ich melden, dass die relativen Pfade des lokalen Dateisystems mithilfe von ../do gut funktionieren - oder zumindest in diesem speziellen Fall gut funktionieren!
Aateeque
1
Es funktioniert unter Linux und Windows, nicht auf Mac (meine Erfahrung)
gabn88
Links zählen hier nicht, da es für sie keine gleiche Herkunftsprüfung gibt. Auch diese Antwort ist 6 Jahre alt, so dass sich die Browser möglicherweise stark verändert haben.
Jaboja
1
Ich bestätige nur für alle anderen, die die Antwort sehen
Ajay
0

Angenommen, Sie haben die folgende Dateistruktur:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

In CSS können Sie image1beispielsweise über die Leitung zugreifen ../images/image1.png.

HINWEIS : Wenn Sie Chrome verwenden, funktioniert dies möglicherweise nicht und Sie erhalten die Fehlermeldung, dass die Datei nicht gefunden wurde. Ich hatte das gleiche Problem, also habe ich einfach den gesamten Cache-Verlauf aus Chrome gelöscht und es hat funktioniert.

A. Tressos
quelle
0

Wenn Sie Stylesheets / Bilder in einem Ordner speichern, damit mehrere Websites sie verwenden können, oder wenn Sie dieselben Dateien auf einer anderen Site auf demselben Server wiederverwenden möchten, habe ich festgestellt, dass mein Browser / Apache mir den Zugriff nicht erlaubt Jeder übergeordnete Ordner über der Stamm-URL der Website. Dies scheint aus Sicherheitsgründen offensichtlich zu sein - man sollte nicht in der Lage sein, sich auf dem Server an einem anderen Ort als den angegebenen Webordnern umzuschauen.

Z.B. funktioniert nicht: www.mywebsite.com/../images

Um dieses Problem zu umgehen, verwende ich Symlinks:

Wechseln Sie in das Verzeichnis von www.mywebsite.com. Führen Sie den Befehl ln -s ../images images aus

Jetzt verweist www.mywebsite.com/images auf www.mywebsite.com/../images

Leendert
quelle