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?

css relative-path absolute-path

— johnlemon
fonte

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

— Kobi
fonte

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.

— Garison Piatt
fonte

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!

— compiaciuto
fonte

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