Bagaimana cara menggunakan jalur relatif / absolut di URL css?

87

Saya memiliki server produksi dan pengembangan. Masalahnya adalah struktur direktori.

Pengembangan:

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

Produksi:

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

Bagaimana saya bisa memiliki folder style.cssdalam cssyang menggunakan di kedua server jalur yang sama untuk background: urlproperti? Apakah ada trik yang bisa saya gunakan dengan jalur relatif?

css relative-path absolute-path johnlemon
sumber

Jawaban:

129

URL relatif terhadap lokasi file CSS , jadi ini akan bekerja untuk Anda:

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

URL relatif kembali ke dua folder, dan kemudian ke imagesfolder - itu harus berfungsi untuk kedua kasus, selama strukturnya sama.

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

URL parsial ditafsirkan relatif terhadap sumber lembar gaya, bukan relatif terhadap dokumen

Kobi
sumber
apakah ini akan berhasil Jika saya harus mundur 2 langkah (memperbarui jawaban) url (../../ images / image.jpg)?
johnlemon
@anothershrubery - maaf contoh pertama saya cacat
johnlemon
@danip - seharusnya berfungsi, tetapi Anda tidak memiliki dua langkah lagi http://domain.com/css/style.css. Saya tidak yakin apa yang bisa dilakukan di sana ... EDIT: - ya, itu harus bekerja dengan struktur yang diperbarui, saya telah memperbarui jawabannya (hanya lain ../, tampaknya).
Kobi
9

Secara pribadi, saya akan memperbaikinya di file .htaccess. Anda harus memiliki akses ke sana.

Tentukan URL CSS Anda seperti ini:

url(/image_dir/image.png);

Di file .htacess Anda, masukkan:

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

atau

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

tergantung situsnya.

Garison Piatt
sumber
2

saya memiliki masalah yang sama ... setiap kali saya ingin mempublikasikan css saya .. Saya harus melakukan pencarian / penggantian .. dan jalur relatif tidak akan berfungsi baik untuk saya karena jalur relatif berbeda dari dev ke produksi.

Akhirnya lelah melakukan pencarian / ganti dan saya membuat css dinamis, (misalnya www.mysite.com/css.php) itu sama tapi sekarang saya bisa menggunakan konstanta php saya di css. sesuatu seperti

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

dan bukan ide yang buruk untuk membuatnya dinamis karena sekarang saya dapat mengompresnya menggunakan kompresor YUI tanpa kehilangan format asli di server dev saya.

Semoga berhasil!

senang tidak menjadi milik
sumber
13
Tidak ada phptag pada pertanyaan tersebut! OP mungkin tidak menggunakan php sama sekali.
Bazzz
6
hanya sebuah contoh .. Anda bisa menggunakan php, asp, jsp .. idenya sama
happyontbelong
6
itu juga bisa statis.
jcuenod
3
Juga jika ini ada dalam file CSS maka <?php **** ?>tidak akan diproses
JD Vangsness