Bagaimanakah Saya Boleh Menetapkan Imej Latar Belakang Secara Dinamik Menggunakan CSS Tanpa JavaScript?

Menggunakan Pembolehubah CSS untuk Menetapkan Imej Latar Belakang Secara Dinamik daripada Atribut Data HTML

Soalan:

Bagaimanakah CSS boleh digunakan untuk secara automatik menetapkan imej latar belakang elemen berdasarkan nilai yang disimpan dalam atribut data HTML, tanpa bergantung pada JavaScript?

Jawapan:

Pembolehubah CSS menyediakan penyelesaian kepada isu ini. Pembolehubah CSS membenarkan gaya disesuaikan secara dinamik berdasarkan nilai yang ditakrifkan dalam elemen HTML. Berikut ialah contoh:

HTML:

<div class="thumb">

CSS:

.thumb {
    background-image: var(--background);
}

Penjelasan:

Dalam kod HTML, atribut gaya digunakan untuk menentukan pembolehubah CSS bernama --background dan tetapkan URL imej latar belakang yang dikehendaki. Dalam kod CSS, sifat imej latar belakang merujuk kepada pembolehubah --background untuk nilainya.

Apabila halaman dimuatkan, penyemak imbas menghuraikan kedua-dua kod HTML dan CSS. Ia mengiktiraf pembolehubah CSS yang ditakrifkan dalam HTML dan menggunakan nilainya pada sifat imej latar belakang elemen dengan kelas .thumb.

Codepen Demo:

https://codepen.io/bruce13/pen/bJdoZW

Nota:

Pembolehubah CSS tidak disokong dalam Internet Explorer. Jika menyokong IE diperlukan, pendekatan alternatif mungkin diperlukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Imej Latar Belakang Secara Dinamik Menggunakan CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!