Mit relativer URL in der CSS-Datei, an welcher Position ist sie relativ?

Question

Wenn Sie beispielsweise eine Hintergrundbild-URL in einer CSS-Datei definieren, wo ist sie relativ, wenn Sie eine relative URL verwenden? Zum Beispiel:

die Datei Angenommen /stylesheets/base-styles.css enthält:

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

Wenn ich um diesen Sheet in verschiedene Dokumente über <link ... /> wird die relative URL in der CSS-Datei relativ zum Stylesheet Dokument in /stylesheets/ sein oder in Bezug auf das aktuelle Dokument es ist enthalten? Mögliche Pfade wie:

/item/details.html 
/about/index.html 
/about/extra/other.html 
/index.html 

Answer 1

Nach W3:

Teil URLs relativ zur Quelle des Stylesheets interpretiert werden, nicht in Bezug auf das Dokument

Daher als Antwort auf Ihre Frage wird es relativ zusein.

Wenn Sie darüber nachdenken, ist dies sinnvoll, da die CSS-Datei zu Seiten in verschiedenen Verzeichnissen hinzugefügt werden kann. Die Standardisierung in die CSS-Datei bedeutet, dass die URLs überall dort funktionieren, wo die Stylesheets verknüpft sind.

Answer 2

Es ist relativ zu der CSS-Datei.

Answer 3

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

(Alles andere gebrochen werden würde, IMNSHO)

Answer 4

Um modulare Stylesheets zu erstellen, die nicht von der absoluten Position einer Ressource abhängig sind, können Autoren relative URIs verwenden. Relative URIs (wie in [RFC3986] definiert) werden mithilfe eines Basis-URI in vollständige URIs aufgelöst. RFC 3986, Abschnitt 5, definiert den normativen Algorithmus für diesen Prozess. Bei CSS-Stylesheets ist der Basis-URI der des Stylesheets, nicht der des Quelldokuments.

Beispiel: Angenommen, die folgende Regel:

body { background: url("yellow") } 

in einem Stylesheet durch den URI bezeichnet befindet:

http://www.example.org/style/basic.css 

Der Hintergrund des Körpers des Quelldokumentes wird mit dem, was Bild mit Ziegeln gedeckt werden wird beschrieben durch die Ressource, die durch den URI

Benutzeragenten beschrieben werden unterscheiden sich darin, wie sie mit ungültigen URIs oder URIs umgehen, die nicht verfügbare oder nicht anwendbare Ressourcen bezeichnen.

Aus der CSS 2.1 spec übernommen.

Answer 5

Es ist relativ zum Stylesheet, aber ich würde empfehlen, die URLs in Bezug auf Ihre URL zu machen:

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

Auf diese Weise können Sie Ihre Dateien bewegen, ohne dass sie in der Zukunft Refactoring.

Answer 6

Ein Problem, das auftreten kann, und dies scheinbar zu brechen ist, wenn Sie die automatische Minimierung von CSS verwenden. Der Anforderungspfad für das minimierte Bündel kann einen anderen Pfad als das ursprüngliche css haben. Dies kann automatisch passieren, was zu Verwirrung führen kann.

Der zugeordnete Anforderungspfad für das reduzierte Bündel sollte "/ originalcssfolder/minifiedbundlename" und nicht nur "minifiedbundlename" sein.

Mit anderen Worten, benennen Sie Ihre Bundles, um den gleichen Pfad (mit der /) als die ursprüngliche Ordnerstruktur zu haben, auf diese Weise externe Ressourcen wie Schriftarten, Bilder zuordnen, um URIs durch den Browser zu korrigieren. Die Alternative ist, absolute URL (Refs in Ihrem CSS zu verwenden, aber das ist nicht in der Regel wünschenswert

Answer 7

mit Versuchen:..

body { 
    background-attachment: fixed; 
    background-image: url(./Images/bg4.jpg); 
} 

Images sein Ordner mit dem Bild halten, die Sie stellen