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

Menetapkan URL Imej Latar Belakang CSS Menggunakan Atribut Data HTML

Mencipta galeri foto tersuai memerlukan pertimbangan yang teliti terhadap struktur HTML dan CSS. Untuk menentukan URL imej latar belakang CSS secara dinamik berdasarkan atribut data HTML, kami boleh memanfaatkan pembolehubah CSS.

Format Jempol HTML

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

CSS dengan Pembolehubah CSS

.thumb {
    --background: url(attr(data-image-src)); /* Store URL in CSS variable */
    
    background-image: var(--background); /* Use CSS variable for background image */
}

Dengan pendekatan ini, data-image-src daripada div.thumb disimpan dalam pembolehubah CSS. Selepas itu, sifat imej latar belakang merujuk pembolehubah CSS untuk menetapkan URL imej latar belakang secara dinamik.

Sokongan Penyemak Imbas
Pembolehubah CSS tidak disokong dalam Internet Explorer, memerlukan pendekatan alternatif. Untuk keserasian IE, penyelesaian menggunakan prapemproses CSS atau JavaScript disyorkan.

Contoh Kod

<div class="thumb">

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

Contoh CodePen yang menunjukkan teknik ini boleh didapati di sini : https://codepen.io/bruce13/pen/bJdoZW

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan URL Imej Latar Belakang CSS Secara Dinamik Menggunakan Atribut Data HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!