Menggunakan URL relatif dalam file CSS, di mana lokasinya relatif?

484

Saat mendefinisikan sesuatu seperti URL gambar latar belakang dalam file CSS, saat menggunakan URL relatif, ke manakah relatifnya? Sebagai contoh:

Misalkan file tersebut /stylesheets/base-styles.cssberisi:

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

Jika saya termasuk stylesheet ini ke dalam dokumen yang berbeda melalui <link ... />akan URL relatif dalam file CSS menjadi relatif terhadap dokumen stylesheet di /stylesheets/atau relatif terhadap dokumen saat ini sudah termasuk ke? Jalur yang mungkin seperti:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html
html css pengecut anonim
sumber

Jawaban:

551

Menurut W3 :

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

Karena itu, dalam menjawab pertanyaan Anda, itu akan relatif terhadap /stylesheets/.

Jika Anda memikirkan hal ini, ini masuk akal, karena file CSS dapat ditambahkan ke halaman di direktori yang berbeda, jadi membakukannya ke file CSS berarti bahwa URL akan berfungsi di mana pun stylesheet terhubung.

Alex Rozanski
sumber
Sepertinya ada pengecualian pada aturan: -ms-behaviordi IE :(
pkyeck
2
ada pengecualian lain: ketika url adalah nilai default dari properti kustom. Katakanlah Anda mendefinisikan .banner { background-image: var(--bgimg, url('images/default.jpg')); }, tetapi belum mendefinisikan nilai untuk saat --bgimgini. Kemudian pada halaman /index.html, sebuah .bannerakan mencari /images/default.jpg, tetapi pada halaman lain /about/index.htmlyang .bannerakan terlihat /about/images/default.jpg. IMO sangat rusak.
chharvey
koreksi: bug nilai default di atas diperbaiki di Chrome v60.
chharvey
Jika css Anda berada dalam satu bundel, jalurnya benar-benar tidak masalah. Ini bukan di mana Anda pikir itu akan terjadi, tidak ada yang relatif lagi.
Tod
1
Saya punya masalah ketika menggunakan properti: background: var(--primary-color-background) no-repeat center center url("maps.jpg");Ini tidak berfungsi di iOS dan Safari. Hanya jalur absolut yang /resources/maps.jpgberfungsi di Safari bersama dengan properti css.
andy
69

Ini relatif terhadap file CSS.

M4N
sumber
50

Ini relatif terhadap stylesheet, tetapi saya sarankan untuk membuat URL relatif terhadap URL Anda:

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

Dengan begitu, Anda dapat memindahkan file Anda tanpa perlu melakukan refactor di masa mendatang.

Codebeef
sumber
Apa bedanya "/" tambahan di bagian depan?
Casebash
15
Sama seperti nama path pada baris perintah, yang memimpin / di depan path berarti menunjuk ke sumber daya absolut di server web saat ini.
David W. Keith
4
Sebenarnya ada kasus di mana lebih baik menggunakan URI relatif terhadap file CSS. Dalam kasus saya, saya memiliki direktori "/ css /" tempat saya meletakkan semua data CSS. Sekarang, saya ingin menguji fitur baru di situs web dalam folder terpisah. Semakin sulit untuk menguji, misalnya, gambar latar belakang baru di folder tes. Semuanya tergantung pada kebutuhan Anda ...
Diego
12
Path absolut membuatnya sulit untuk menempatkan solusi dalam subfolder dari domain. Ada sejumlah alasan mengapa Anda ingin mendukung subfolder. Ini membuatnya lebih mudah untuk melakukan pengujian (seperti yang disebutkan Diego) di mana Anda dapat memiliki versi sebelumnya / pra-rilis yang terletak di domain yang sama dengan prod. Perubahan di masa depan di mana server proksi perusahaan diatur untuk mendukung SSO, memindahkan semua solusi ke satu domain, dll. Terutama dengan SSL, orang mungkin ingin menghindari overhead dari beberapa nama domain untuk dipelihara. Bagi saya pertimbangan ini jauh lebih penting daripada "lebih mudah untuk memindahkan file .css saya".
Tedd Hansen
gambar dan hal-hal seperti itu berlaku untuk cdn jadi ini sempurna
Muhammad Umer
30

Untuk membuat lembaran gaya modular yang tidak bergantung pada lokasi absolut sumber daya, penulis dapat menggunakan URI relatif. URI relatif (sebagaimana didefinisikan dalam [RFC3986] ) diselesaikan untuk URI penuh menggunakan URI basis. RFC 3986, bagian 5, mendefinisikan algoritma normatif untuk proses ini. Untuk lembar gaya CSS, URI dasar adalah lembar gaya, bukan dari dokumen sumber.

Misalnya, anggap aturan berikut:

body { background: url("yellow") }

terletak di style sheet yang ditunjuk oleh URI:

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

Latar belakang BODY dokumen sumber akan dilapisi dengan gambar apa pun yang dijelaskan oleh sumber daya yang ditunjuk oleh URI 

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

Agen pengguna dapat bervariasi dalam cara mereka menangani URI yang tidak valid atau URI yang menunjuk sumber daya yang tidak tersedia atau tidak dapat diterapkan.

Diambil dari spec CSS 2.1 .

jrista
sumber
5

Salah satu masalah yang dapat terjadi, dan tampaknya memecah ini adalah ketika menggunakan minimisasi otomatis css. Jalur permintaan untuk bundel yang diperkecil dapat memiliki jalur yang berbeda dari css asli. Ini dapat terjadi secara otomatis sehingga dapat menyebabkan kebingungan.

Jalur permintaan yang dipetakan untuk bundel yang diperkecil haruslah "/ originalcssfolder / minifiedbundlename" bukan hanya "minifiedbundlename".

Dengan kata lain, beri nama bundel Anda untuk memiliki jalur yang sama (dengan /) sebagai struktur folder asli, dengan cara ini sumber daya eksternal seperti font, gambar akan dipetakan untuk mengoreksi URI oleh browser. Alternatifnya adalah dengan menggunakan url absolut (referensi dalam css Anda tetapi itu biasanya tidak diinginkan.

mms
sumber
Ini menyelamatkan saya banyak waktu! Terima kasih. Itu harus didokumentasikan lebih lanjut
mjbates7
0

Ini berhasil untuk saya. menambahkan dua titik dan garis miring.

body{
    background: url(../images/yourimage.png);
}
Jakob Sternberg
sumber
-4

Coba gunakan:

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

Images sedang folder memegang gambar yang ingin Anda posting.

Keshh Chiei
sumber