HTML'deki bir URL'nin src yolunda bir seviye nasıl yukarı çıkılır?

104

Stil sayfalarını {root} / styles dizininde, resimleri ise bir web sitesi için {root} / images dizininde saklıyorum. Stil sayfalarındaki, belirtilen görüntüler için images dizinine bakma yolunu nasıl verebilirim?

eg In background-image: url('/images/bg.png');

html css relative-path

— aateeque
kaynak

187

..Ana dizini belirtmek için kullanın :

background-image: url('../images/bg.png');

— yalnız gün
kaynak

Bunu başka bir yerde de okudum - ama işe yaramıyor! (en azından Chrome'da)

— aateeque

27

Öyle. Ancak konumun, CSS dosyasını gömen belgeye değil, CSS dosyasının konumuna göre olduğunu unutmayın.

— ThiefMaster

1

@ThiefMaster Yalnızca satır içi CSS

— 1000Gbps

59

Göreli dosya yolları hakkında bilmeniz gereken her şey:

İle başlamak / kök dizine döner ve orada başlar
İle başlamak ../ bir dizin geri gider ve oradan başlar
İle başlayarak ../../ iki dizinleri geri hamle ve başlar orada (ve benzeri ...)
İlerlemek için ilk alt dizinden başlayın ve ilerlemeye devam edin.

Daha fazla ayrıntı için burayı tıklayın !

— S.Akruwala
kaynak

52

Kullanım ../:

background-image: url('../images/bg.png');

Bunu istediğiniz sıklıkta kullanabilirsiniz, örneğin, ../../images/hatta farklı pozisyonlarda, örneğin ../images/../images/../images/( ../images/tabii ki aynı )

— ThiefMaster
kaynak

9

Chrome'da, bazı HTTP sunucusundan bir web sitesi yüklediğinizde, hem mutlak yollar (örneğin /images/sth.png) hem de bazı üst düzey dizinlere (örneğin ../images/sth.png) göreceli yollar çalışır.

Fakat!

Yerel dosya sisteminden bir HTML belgesi yüklediğinizde (Chrome'da!), Geçerli dizinin üzerindeki dizinlere erişemezsiniz. Yani ../something/something.sthgöreli yola erişemezsiniz ve mutlak yolu değiştiremezsiniz, yoksa başka bir şey yardımcı olmaz.

— Jaboja
kaynak

1

Yeniden kontrol ettikten sonra, yerel dosya sistemi göreli yollarının ../iyi çalıştığını veya en azından bu özel durumda iyi çalıştığını bildirebilirim !

— aateeque

1

Mac'te değil, linux ve pencerelerde çalışıyor (benim deneyimim)

— gabn88

Bağlantılar, onlar için aynı kaynak kontrolü olmadığından burada sayılmaz. Ayrıca bu cevap 6 yaşında olduğundan tarayıcılar çok değişmiş olabilir.

— jaboja

1

Cevabı görüntüleyen başka biri için onaylıyorum

— Ajay

0

Aşağıdaki dosya yapısına sahip olduğunuzu varsayarsak:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

CSS'de image1örneğin hattı kullanarak erişebilirsiniz ../images/image1.png.

NOT : Chrome kullanıyorsanız, çalışmayabilir ve dosyanın bulunamadığına dair bir hata alırsınız. Aynı sorunu yaşadım, bu yüzden tüm önbellek geçmişini Chrome'dan sildim ve işe yaradı.

— A.Tressos
kaynak

0

Stil sayfalarını / resimleri birden fazla web sitesinin kullanabilmesi için bir klasörde depoluyorsanız veya aynı dosyaları aynı sunucudaki başka bir sitede yeniden kullanmak istiyorsanız, tarayıcımın / Apache'nin şu adrese gitmeme izin vermediğini buldum web sitesi kök URL'sinin üzerindeki herhangi bir üst klasör. Bu, güvenlik nedenlerinden ötürü aşikar görünüyor - sunucuda belirtilen web klasörleri dışında herhangi bir yerde gezinilmemelidir.

Örneğin. çalışmıyor: www.mywebsite.com/../images

Çözüm olarak, Symlinks kullanıyorum:

Www.mywebsite.com dizinine gidin ln -s ../images images komutunu çalıştırın.

Şimdi www.mywebsite.com/images, www.mywebsite.com/../images adresini gösterecek

— Leendert
kaynak