Bagaimanakah Saya Boleh Menggunakan Atribut Data untuk Menetapkan Imej Latar Belakang CSS?

Imej latar belakang CSS daripada Atribut imej data

Dalam HTML, elemen selalunya mempunyai atribut data yang digunakan untuk menyimpan maklumat tambahan. Menetapkan imej latar belakang kepada nilai atribut data boleh dicapai semata-mata melalui CSS.

Isunya

Kod CSS yang disediakan:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

gagal memaparkan imej latar belakang.

Penyelesaian: Tersuai Sifat

Pendekatan alternatif ialah menggunakan sifat tersuai CSS, yang membenarkan menetapkan sebarang jenis nilai, termasuk URL.

.kitten {
  background-image: var(--bg-image);
}

Kemudian, tetapkan sifat tersuai dalam gaya elemen atribut:

<div class="kitten">

Pendekatan ini membenarkan kemas kini dinamik imej latar belakang melalui perubahan CSS atau interaksi skrip.

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