webentwicklung-frage-antwort-db.com.de

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

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.css - Ordner in css haben, der auf beiden Servern den gleichen Pfad für die Eigenschaft background: url Verwendet? Gibt es einen Trick, den ich mit relativen Pfaden anwenden kann?

cssrelative-pathabsolute-path
78
danidacar

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

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

Die relative URL geht auf zwei Ordner zurück und dann auf den Ordner images - dies sollte in beiden Fällen funktionieren, sofern die Struktur identisch ist.

Von http://www.w3.org/TR/REC-CSS1/#url :

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

115
Kobi

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

abhängig von der Website.

7
Garison Piatt

ich hatte das gleiche Problem ... jedes Mal, wenn ich mein CSS veröffentlichen wollte. Ich musste ein Suchen/Ersetzen durchführen. Und der relative Pfad funktionierte auch nicht für mich, da die relativen Pfade von Entwickler zu Produktion unterschiedlich waren.

Schließlich hatte ich es satt, das Suchen/Ersetzen durchzuführen, und habe ein dynamisches CSS erstellt (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, denn jetzt könnte ich es mit YUI Compressor komprimieren, ohne das ursprüngliche Format auf meinem Entwickler-Server zu verlieren.

Viel Glück!

2
pleasedontbelong