Jak używać ścieżek względnych / bezwzględnych w adresach URL css?

86

Mam serwer produkcyjny i programistyczny. Problemem jest struktura katalogów.

Rozwój:

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

Produkcja:

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

Jak mogę mieć folder style.cssin, cssktóry używa na obu serwerach tej samej ścieżki do background: urlwłaściwości? Czy istnieje sztuczka, której mogę użyć ze ścieżkami względnymi?

css relative-path absolute-path nascar
źródło

Odpowiedzi:

129

Adres URL jest powiązany z lokalizacją pliku CSS , więc powinno działać w Twoim przypadku:

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

Względny adres URL prowadzi do dwóch folderów wstecz, a następnie do imagesfolderu - powinien działać w obu przypadkach, o ile struktura jest taka sama.

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

Częściowe adresy URL są interpretowane względem źródła arkusza stylów, a nie względem dokumentu

Kobi
źródło
czy to zadziała, jeśli będę musiał cofnąć się o 2 kroki (zaktualizowałem odpowiedź) url (../../ images / image.jpg)?
nascar
@anothershrubery - przepraszam, że mój pierwszy przykład był wadliwy
nascar
@danip - powinno działać, ale nie masz dwóch kroków od http://domain.com/css/style.css. Nie jestem pewien, co można tam zrobić ... EDYCJA: - tak, powinno działać ze zaktualizowaną strukturą, zaktualizowałem odpowiedź ( ../wydaje się, że jest inna ).
Kobi
9

Osobiście naprawiłbym to w pliku .htaccess. Powinieneś mieć do tego dostęp.

Zdefiniuj swój adres URL CSS jako taki:

url(/image_dir/image.png);

W swoim pliku .htacess umieść:

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

lub

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

w zależności od miejsca.

Garison Piatt
źródło
2

miałem ten sam problem ... za każdym razem, gdy chciałem opublikować mój plik css ... musiałem wykonać wyszukiwanie / zamianę ... i ścieżka względna również nie działała, ponieważ ścieżki względne były różne od dewelopera do produkcji.

W końcu byłem zmęczony szukaniem / zastępowaniem i utworzyłem dynamiczny css, (np. Www.mysite.com/css.php) jest to samo, ale teraz mogłem użyć stałych php w css. coś podobnego

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

i nie jest złym pomysłem uczynienie go dynamicznym, ponieważ teraz mogę go skompresować za pomocą kompresora YUI bez utraty oryginalnego formatu na moim serwerze deweloperskim.

Powodzenia!

zadowolona
źródło
13
W phppytaniu nie ma tagu! OP może w ogóle nie używać php.
Bazzz
6
to tylko przykład .. możesz użyć php, asp, jsp .. pomysł jest taki sam
enjoyontbelong
6
może być również statyczny.
jcuenod
3
Również jeśli to jest w pliku CSS, <?php **** ?>nie zostanie przetworzone
JD Vangsness