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

Antworten:

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