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

Mengubah suai Warna Isian dalam Imej Latar Belakang SVG

Apabila menggabungkan SVG sebagai imej latar belakang menggunakan CSS, keupayaan untuk mengubah suai atribut isiannya secara langsung melalui CSS adalah terhad. Berikut ialah penyelesaian untuk mengubah warna isian dalam senario ini:

Topeng CSS

Topeng CSS membolehkan anda mencipta topeng yang digunakan pada elemen. Untuk menggunakan teknik ini untuk SVG, ikuti langkah berikut:

1. Letakkan SVG dalam fail berasingan, seperti "icon.svg".
2. Gunakan sifat topeng pada elemen yang anda mahu menggunakan latar belakang SVG kepada:

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

Ini mencipta topeng menggunakan bentuk SVG dan menerapkannya pada elemen dengan kelas .icon.

Nota:

• Warna latar belakang elemen berfungsi sebagai warna isian untuk SVG.
• Teknik ini menutup SVG dan mempengaruhi keseluruhan imej. Untuk mengubah suai bentuk tertentu secara selektif dalam SVG, anda boleh menyasarkannya menggunakan pemilih CSS.

Untuk Maklumat Lanjut:

Sumber yang sangat baik untuk mewarna SVG dalam CSS gambar latar belakang boleh didapati 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!