Bagaimana untuk Menetapkan Imej Latar Belakang CSS Secara Dinamik Menggunakan Atribut Data?

Atribut Data HTML: Menetapkan Imej Latar Belakang CSS Secara Dinamik

Matlamatnya adalah untuk menetapkan imej latar belakang secara dinamik untuk elemen berdasarkan atribut data dalam HTML, khususnya menggunakan elemen .thumb untuk memaparkan lakaran kenit.

Dalam struktur HTML, setiap div lakaran kecil mempunyai atribut data-image-src yang menentukan URL imej:

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

Pada mulanya, jangkaan adalah untuk menetapkan imej latar belakang CSS menggunakan fungsi attr:

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

Walau bagaimanapun, pendekatan ini tidak berjaya. Sebagai penyelesaian alternatif, Pembolehubah CSS diperkenalkan.

Menggunakan Pembolehubah CSS

Pembolehubah CSS membolehkan anda mengisytiharkan pembolehubah dan menggunakannya dalam anda gaya:

<div class="thumb">
<p>Dalam HTML di atas, pembolehubah --background ditetapkan menggunakan atribut gaya.</p>
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

Dalam CSS, sifat imej latar belakang kini merujuk kepada - -pembolehubah latar belakang. Ini memastikan bahawa setiap elemen .thumb menggunakan URL yang ditentukan dalam atribut data-image-src yang sepadan sebagai imej latar belakangnya.

Contoh Codepen

Contoh dinamik ini pendekatan boleh didapati di:

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