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

70

Wenn ich ein Bild oder eine andere Datei in einer CSS-Datei über einen relativen Pfad referenziere, ist der Pfad relativ zur CSS-Datei oder zur HTML-Datei unter Verwendung der CSS-Datei?

css path Nathan Osman
quelle

Antworten:

86

Ja, es ist relativ zu .css

Hier ist ein Beispiellayout: 

Page:  page.htm ... does not matter where
CSS:   /resources/css/styles.css  
Image: /resources/images/image.jpg

CSS in styles.css:

div { background-image: url('../images/image.jpg');
Nick Craver
quelle
Vielen Dank für die ausführliche Antwort. Ich war in der gleichen Ausgabe wirklich verwirrt, und hier haben Sie es einfach besser gelöst.
AbdulAziz
3
Dies ist in der Tat sinnvoll, da damit dieselbe .css Datei aus verschiedenen .htmlDateien (die sich möglicherweise an verschiedenen Orten befinden) referenziert werden kann, ohne die Pfade zu externen Objekten zu bremsen.
Davide
Warum ist die Klammer für div in styles.css nicht geschlossen?
Suleman
8

Ja. Es ist relativ zur CSS-Datei. Ich werde hinzufügen, dass dies auch relativ zu der Domäne umfasst, in der sich die CSS-Datei befindet.

Wenn also auf das CSS verwiesen wird als:

<link href="http://www.otherdomain.com/css/example.css" type="text/css" rel="stylesheet" />

und es enthält:

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

Der Hintergrund wird sein:

http://www.otherdomain.com/images/image.jpg

jshoaf
quelle
2
Das Include von einer externen Domain funktioniert in einigen Browsern nur, wenn Sie den Header so eingestellt haben, dass externe Includes aufgrund derselben Ursprungsrichtlinie zulässig sind
Jakob Alexander Eichler,
1

Zur CSS-Datei.

Emzero
quelle
0

Ja, es ist relativ zum Stylesheet. Aktuelle Referenzen finden Sie im MDN . Derzeit ist der neueste Entwurf [ CSS-Werte-4 ].

SamB
quelle