Bolehkah saya Menggunakan Pembolehubah CSS Di Dalam Fungsi `url()`?

Bolehkah saya Menginterpolasi Pembolehubah CSS Dalam Ungkapan URL?

Dalam CSS, sifat tersuai (juga dikenali sebagai pembolehubah CSS) menyediakan cara yang mudah untuk menyimpan dan mengubah suai nilai secara pemrograman. Walau bagaimanapun, pengguna mungkin menghadapi had apabila cuba menginterpolasi nilai pembolehubah dalam fungsi URL, seperti dalam sifat latar belakang.

Contoh:

:root {
  --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
  background: url(var(--url));
}

Malangnya, interpolasi sedemikian tidak boleh dilakukan dalam fungsi url() disebabkan oleh sebab warisan. Penghurai CSS menganggap url(var(--url)) bukan sebagai token berasingan, tetapi sebagai token url() yang tidak sah.

Walaupun interpolasi biasanya tersedia untuk fungsi CSS seperti rgba(), ia tidak dibenarkan untuk url() disebabkan oleh kemungkinan kekaburan dan isu penghuraian.

Oleh itu, mentakrifkan secara eksplisit keseluruhan rentetan URL dalam harta tersuai diperlukan:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

Sebagai alternatif, JavaScript boleh digunakan untuk mencapai interpolasi yang diingini.

Atas ialah kandungan terperinci Bolehkah saya Menggunakan Pembolehubah CSS Di Dalam Fungsi `url()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!