Come utilizzare percorsi relativi / assoluti negli URL CSS?


87

Ho un server di produzione e sviluppo. Il problema è la struttura delle directory.

Sviluppo:

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

Produzione:

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

Come posso avere una style.cssnella csscartella che utilizza su entrambi i server lo stesso percorso per la background: urlproprietà? C'è un trucco che posso usare con percorsi relativi?

Risposte:


130

L'URL è relativo alla posizione del file CSS , quindi dovrebbe funzionare per te:

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

L'URL relativo torna indietro di due cartelle, quindi alla imagescartella: dovrebbe funzionare in entrambi i casi, purché la struttura sia la stessa.

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

Gli URL parziali vengono interpretati in relazione all'origine del foglio di stile, non in relazione al documento


funzionerà Se devo tornare indietro di 2 passaggi (aggiornata la risposta) url (../../ images / image.jpg)?
johnlemon

@anothershrubery - scusa il mio primo esempio era imperfetto
johnlemon

@danip - dovrebbe funzionare, ma non hai due passaggi da http://domain.com/css/style.css. Non sono sicuro di cosa si possa fare lì ... EDIT: - sì, dovrebbe funzionare con la struttura aggiornata, ho aggiornato la risposta (solo un'altra ../, a quanto pare).
Kobi

9

Personalmente, lo aggiusterò nel file .htaccess. Dovresti avere accesso a quello.

Definisci il tuo URL CSS come tale:

url(/image_dir/image.png);

Nel tuo file .htacess, inserisci:

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

o

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

a seconda del sito.


2

ho avuto lo stesso problema ... ogni volta che volevo pubblicare il mio css .. dovevo fare una ricerca / sostituzione .. e il percorso relativo non funzionava neanche per me perché i percorsi relativi erano diversi da sviluppo a produzione.

Finalmente ero stanco di fare la ricerca / sostituzione e ho creato un CSS dinamico, (es. Www.miosito.com/css.php) è lo stesso ma ora potrei usare le mie costanti php nel CSS. qualcosa di simile

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

e non è una cattiva idea renderlo dinamico perché ora posso comprimerlo usando il compressore YUI senza perdere il formato originale sul mio server di sviluppo.

In bocca al lupo!


13
Non ci sono phptag sulla domanda! OP potrebbe non utilizzare affatto php.
Bazzz

6
è solo un esempio .. potresti usare php, asp, jsp .. l'idea è la stessa
lieto di appartenere

6
potrebbe anche essere statico.
jcuenod

3
Inoltre, se questo è in un file CSS, <?php **** ?>non verrà elaborato
JD Vangsness
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.