Bagaimanakah Saya Boleh Menukar Warna Isian Imej Latar Belakang SVG Menggunakan CSS?

Cara Mengubah Suai Warna Isian Imej SVG Sebagai Imej Latar Belakang

Apabila membenamkan imej SVG sebaris, anda boleh mengubah suai warna isiannya dengan mudah menggunakan CSS. Walau bagaimanapun, teknik ini menjadi bermasalah apabila SVG dihidangkan sebagai imej latar belakang.

Soalan ini menangani keperluan untuk mengubah suai atribut isian SVG yang digunakan sebagai imej latar belakang. SVG yang dimaksudkan mengandungi bintang dan bulatan dengan warna isian tertentu.

Penyelesaian terletak pada melaksanakan topeng CSS. Sifat topeng mencipta topeng yang digunakan pada elemen. Imej topeng ditetapkan kepada URL fail SVG. Dengan menggunakan topeng pada elemen yang diingini, anda boleh mengubah suai warna isian SVG terbenam dengan berkesan.

Kod CSS berikut menunjukkan cara menggunakan topeng:

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Dalam contoh ini, kelas .icon akan mempunyai latar belakang merah dan topeng SVG akan digunakan, mengubah suai warna isian SVG.

Untuk selanjutnya wawasan tentang teknik ini, rujuk artikel komprehensif di:

https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Isian Imej Latar Belakang SVG Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!