Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menukar Warna Isian Imej Latar Belakang SVG Menggunakan CSS?

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

Mary-Kate Olsen
Lepaskan: 2024-12-23 08:26:17
asal
550 orang telah melayarinya

How Can I Change the Fill Color of an SVG Background Image Using 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);
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan