Bagaimana untuk Mengubah Warna Isian Imej Latar Belakang SVG dengan CSS?

Cara Mengubah Warna Isian Imej Latar Belakang SVG

Apabila sebaris, CSS boleh mengubah suai warna isian SVG dengan mudah. Walau bagaimanapun, menukar atribut isian apabila SVG digunakan sebagai imej latar belakang menimbulkan cabaran.

Berikut ialah cara untuk mencapai ini menggunakan topeng CSS:

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

Ini mencipta topeng berdasarkan yang disediakan Imej SVG, menerapkannya pada elemen yang ditentukan. Akibatnya, warna latar belakang elemen dipengaruhi oleh atribut isian SVG.

Untuk butiran lanjut, rujuk artikel berwawasan ini: https://codepen.io/noahblon/post/coloring-svgs-in-css- imej latar belakang

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Warna Isian Imej Latar Belakang SVG dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!