Bagaimana untuk mencipta latar belakang imej dinamik dengan atribut data HTML dan pembolehubah CSS?

Latar Belakang Imej Dinamik Menggunakan Atribut Data HTML dan CSS

Masalah:

Andaikan anda' mencipta semula galeri foto tersuai dan menggunakan atribut data HTML untuk menyimpan URL imej. Anda mahu menetapkan URL ini kepada sifat imej latar belakang elemen div yang mewakili lakaran kecil.

Kod HTML:

<div class="thumb" data-image-src="images/img.jpg"></div>

Kod CSS (Bahagian Yang Dipersoalkan ):

.thumb {
    background-image: attr(data-image-src);
}

Objektifnya adalah untuk mengekstrak nilai data-image-src daripada setiap div ibu jari dan menetapkannya sebagai imej latar belakang untuk div tersebut dalam fail CSS.

Penyelesaian:

Menggunakan pembolehubah CSS membolehkan anda mencapai ini tanpa jQuery atau penggodaman khusus pelayar. Ambil perhatian bahawa pembolehubah CSS tidak disokong dalam Internet Explorer.

Kod HTML yang dikemas kini:

<div class="thumb">
<p><strong>Kod CSS yang dikemas kini:</strong></p>
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

Demo Codepen:

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