CSS dosyasında göreli URL kullanarak hangi konuma göreceli?

Bir CSS dosyasında arka plan resmi URL'si gibi bir şey tanımlarken, göreli bir URL kullanırken neye göre? Örneğin:

Dosyanın /stylesheets/base-styles.cssşunları içerdiğini varsayalım :

div#header { 
    background-image: url('images/header-background.jpg');
}

Ben aracılığıyla farklı belgeler içine bu stil eklerseniz <link ... />CSS dosyasındaki göreli URL olacak stil belgeye göreceli içinde /stylesheets/veya geçerli belgeye göre o kadar kapsıyor? Olası yollar:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

W3'e göre :

Kısmi URL'ler, belgeye göre değil, stil sayfasının kaynağına göre yorumlanır

Bu nedenle, sorunuza cevap olarak, göreceli olacaktır /stylesheets/.

Bunu düşünürseniz, CSS dosyası farklı dizinlerdeki sayfalara eklenebileceğinden, bu mantıklıdır, bu nedenle CSS dosyasına standartlaştırılması, URL'lerin stil sayfalarının bağlandığı her yerde çalışacağı anlamına gelir.

CSS dosyasına göredir.

Stil sayfasına göredir, ancak URL'leri URL'nize göreli olarak öneririm:

div#header { 
  background-image: url(/images/header-background.jpg);
}

Bu şekilde, dosyalarınızı ileride yeniden düzenlemeye gerek kalmadan hareket ettirebilirsiniz.

Bir kaynağın mutlak konumuna bağlı olmayan modüler stil sayfaları oluşturmak için yazarlar göreli URI'ler kullanabilir. Göreli URI'lar ( [RFC3986] ' da tanımlandığı gibi ), bir temel URI kullanılarak tam URI'lara çözümlenir. RFC 3986, bölüm 5, bu işlem için normatif algoritmayı tanımlar. CSS stil sayfaları için temel URI, kaynak belgenin stil sayfasının stilidir.

Örneğin, aşağıdaki kuralı varsayalım:

body { background: url("yellow") }

URI tarafından belirtilen bir stil sayfasında bulunur:

http://www.example.org/style/basic.css

Kaynak belgenin BODY öğesinin arka planı, URI tarafından belirtilen kaynak tarafından açıklanan görüntü ile döşenecektir.

http://www.example.org/style/yellow

Kullanıcı aracıları, geçersiz URI'leri veya kullanılamayan veya uygulanamayan kaynakları belirleyen URI'leri işleme şekline göre değişebilir.

Alındığı CSS 2.1 spec .

CSS stil sayfaları için temel URI, kaynak belgenin stil sayfasının stilidir.

(Başka bir şey kırılır, IMNSHO)

Oluşabilecek ve görünüşte kırılan bir sorun, css'in otomatik küçültülmesi kullanılır. Küçültülmüş paket için istek yolu, orijinal css'den farklı bir yola sahip olabilir. Bu otomatik olarak gerçekleşebilir ve karışıklığa neden olabilir.

Küçültülmüş paket için eşlenen istek yolu, yalnızca "minifiedbundlename" değil "/ originalcssfolder / minifiedbundlename" olmalıdır.

Başka bir deyişle, paketlerinizi orijinal klasör yapısıyla aynı yola (/) sahip olacak şekilde adlandırın, bu şekilde yazı tipleri, resimler gibi harici kaynaklar tarayıcı tarafından URI'ları düzeltmek için eşlenir. Alternatif, mutlak url kullanmaktır (css'nizdeki referanslar), ancak bu genellikle istenmez.

Bu benim için çalıştı. iki nokta ve eğik çizgi ekleyerek.

body{
    background: url(../images/yourimage.png);
}

Kullanmayı deneyin:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images göndermek istediğiniz resmi tutan klasör olmak.