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

Mengubah suai Warna Isian SVG sebagai Imej Latar Belakang

Apabila elemen SVG sebaris digunakan, CSS boleh digunakan untuk mengubah suai warna isian dengan mudah. Walau bagaimanapun, kaedah ini tidak boleh digunakan apabila SVG digunakan sebagai imej latar belakang. Untuk menangani cabaran ini, pertimbangkan untuk memanfaatkan topeng CSS.

Sifat 'topeng' membolehkan anda membuat topeng yang dikenakan pada elemen. Dengan menggunakan sifat ini, anda boleh menentukan fail SVG sebagai imej topeng, seperti yang ditunjukkan di bawah:

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

Dengan pendekatan ini, warna latar belakang elemen ditetapkan kepada merah dan fail SVG berfungsi sebagai topeng, mengubah suai warna isian bentuk SVG dengan sewajarnya. Untuk mendapatkan cerapan tambahan tentang teknik ini, rujuk artikel berikut: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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