Wie verwende ich relative / absolute Pfade in CSS-URLs?

86

Ich habe einen Produktions- und Entwicklungsserver. Das Problem ist die Verzeichnisstruktur.

Entwicklung:

http://dev.com/subdir/images/image.jpg
http://dev.com/subdir/resources/css/style.css

Produktion:

http://live.com/images/image.jpg
http://live.com/resources/css/style.css

Wie kann ich einen style.cssIn- cssOrdner haben, der auf beiden Servern denselben Pfad für die background: urlEigenschaft verwendet? Gibt es einen Trick, den ich mit relativen Pfaden verwenden kann?

css relative-path absolute-path

— Nascar
quelle

127

Die URL ist relativ zum Speicherort der CSS-Datei , daher sollte dies für Sie funktionieren:

url('../../images/image.jpg')

Die relative URL geht zwei Ordner zurück und dann in den imagesOrdner - sie sollte in beiden Fällen funktionieren, solange die Struktur identisch ist.

Von https://www.w3.org/TR/CSS1/#url :

Teil-URLs werden relativ zur Quelle des Stylesheets interpretiert, nicht relativ zum Dokument

— Kobi
quelle

Wird dies funktionieren, wenn ich 2 Schritte zurückgehen muss (die Antwort wurde aktualisiert)? url (../../ images / image.jpg)?

— Nascar

@anothershrubery - Entschuldigung, mein erstes Beispiel war fehlerhaft

— Nascar

@danip - es sollte funktionieren, aber Sie haben nicht zwei Schritte von http://domain.com/css/style.css. Ich bin nicht sicher, was dort getan werden kann ... BEARBEITEN: - Ja, es sollte mit der aktualisierten Struktur funktionieren, ich habe die Antwort aktualisiert (nur eine andere ../, wie es scheint).

— Kobi

9

Persönlich würde ich dies in der .htaccess-Datei beheben. Sie sollten Zugriff darauf haben.

Definieren Sie Ihre CSS-URL als solche:

url(/image_dir/image.png);

Fügen Sie in Ihre .htacess-Datei Folgendes ein:

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^image_dir/(.*) subdir/images/$1

oder

RewriteRule ^image_dir/(.*) images/$1

je nach Standort.

— Garison Piatt
quelle

2

Ich hatte das gleiche Problem ... jedes Mal, wenn ich mein CSS veröffentlichen wollte ... musste ich suchen / ersetzen ... und der relative Pfad würde auch für mich nicht funktionieren, da die relativen Pfade von Entwickler zu Produktion unterschiedlich waren.

Schließlich war ich es leid, das Suchen / Ersetzen durchzuführen, und ich erstellte ein dynamisches CSS (z. B. www.mysite.com/css.php). Es ist dasselbe, aber jetzt konnte ich meine PHP-Konstanten im CSS verwenden. so etwas wie

.icon{
  background-image:url('<?php echo BASE_IMAGE;?>icon.png');
}

und es ist keine schlechte Idee, es dynamisch zu machen, da ich es jetzt mit dem YUI-Kompressor komprimieren kann, ohne das ursprüngliche Format auf meinem Entwicklungsserver zu verlieren.

Viel Glück!

— erfreut nicht dazu
quelle

13

Es gibt kein phpTag auf der Frage! OP verwendet möglicherweise überhaupt kein PHP.

— Bazzz

6

ist nur ein Beispiel .. Sie könnten PHP, Asp, JSP verwenden .. die Idee ist die gleiche

— erfreut über den

6

es könnte auch statisch sein.

— Jcuenod

3

Auch wenn dies in einer CSS-Datei ist, wird das <?php **** ?>nicht verarbeitet

— JD Vangsness