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

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