Bagaimanakah Saya Boleh Menetapkan Imej Latar Belakang Secara Dinamik dalam CSS Menggunakan Atribut Data?

Menetapkan Imej Latar Belakang dengan Ciri Tersuai CSS

Banyak elemen dalam kod anda mengikut corak:

Anda berhasrat untuk menetapkan imej latar belakang elemen ini kepada nilai yang disimpan dalam atribut imej data, menggunakan CSS tulen.

Percubaan Sebelumnya

Anda cuba menggunakan kod CSS berikut untuk mencapai ini:

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

Semasa sempadan telah dipaparkan dengan betul, imej latar belakang kekal tidak terjejas.

Penyelesaian Menggunakan Tersuai Properties

Alternatif yang berdaya maju untuk menggunakan atribut data ialah menggunakan sifat tersuai CSS. Memandangkan nilainya tidak terhad kepada rentetan, anda boleh menetapkan sebarang jenis yang sah.

Selain itu, sifat tersuai membolehkan anda mengemas kini nilai secara dinamik melalui pertukaran lembaran gaya.

Begini cara anda boleh menggunakan sifat tersuai untuk menetapkan imej latar belakang:

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div>

Dalam contoh ini, sifat --bg-image ditakrifkan dalam lembaran gaya dan diberikan kepada URL imej. Atribut gaya pada elemen div menetapkan nilai --bg-image menggunakan penggayaan sebaris. Ini membolehkan anda menentukan imej latar belakang untuk setiap elemen individu tanpa mengubah suai lembaran gaya.

Dengan memanfaatkan sifat tersuai, anda memperoleh fleksibiliti dan kebolehselenggaraan dalam menetapkan imej latar belakang melalui atribut data.

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