Bagaimanakah Saya Boleh Menukar Warna Isian SVG Apabila Digunakan sebagai Imej Latar Belakang?

Mengubah suai Warna Isian SVG dalam Imej Latar Belakang

Menggabungkan output SVG terus ke dalam kod halaman membolehkan pengubahsuaian CSS warna isian yang mudah. Walau bagaimanapun, proses ini menjadi lebih mencabar apabila SVG dihidangkan sebagai imej latar belakang menggunakan sifat imej latar belakang HTML.

Pendekatan Alternatif: Topeng CSS

Untuk memintas pengehadan ini , topeng CSS menyediakan penyelesaian. Dengan menggunakan sifat topeng, pembangun boleh mencipta dan menggunakan topeng pada elemen, dengan berkesan menyembunyikan kawasan tertentu. Kod berikut menggambarkan aplikasinya:

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

Pendekatan ini membolehkan pengguna mengubah suai warna isian imej SVG yang digunakan sebagai imej latar belakang dengan mengubah atribut isian dalam fail SVG itu sendiri.

Untuk pandangan dan contoh lanjut, 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 SVG Apabila Digunakan sebagai Imej Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!