Bagaimanakah Penapis CSS Boleh Mengubah Hitam menjadi Mana-mana Warna Yang Diberikan?

Cara mengubah hitam menjadi warna tertentu menggunakan penapis CSS:

Pengenalan

Ini soalan meneroka kaedah untuk mengubah warna hitam (#000) kepada warna sasaran tertentu menggunakan hanya penapis CSS. Konteks untuk ini timbul daripada keperluan untuk mewarna semula SVG dalam imej latar belakang, terutamanya untuk menangani ciri matematik TeX tertentu dalam KaTeX.

Kaedah

Kaedah yang dicadangkan memanfaatkan CSS penapis untuk mencapai perubahan warna. Penapis CSS khusus yang digunakan ialah:

• invert(): Mengawal penyongsangan warna.
• sepia(): Menambahkan kesan sepia.
• saturate() : Melaraskan tahap tepu.
• hue-rotate(): Memutar warna nilai.
• kecerahan(): Mengubah suai kecerahan.
• kontras(): Mengubah kontras.

Pelaksanaan

Pelaksanaan transformasi penapis CSS adalah seperti berikut:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) brightness() contrast();

Penapis ini rentetan menggunakan operasi berikut:

1. Terbalikkan warna kepada putih.
2. Menggunakan kesan sepia.
3. Menepu warna ke tahap maksimumnya.
4. Memutar rona kepada nilai yang diingini.
5. Mengubah suai kecerahan dan kontras sebagai diperlukan.

Pertimbangan

1. Penapis CSS tidak disokong secara konsisten merentas semua penyemak imbas.
2. Warna bukan hitam juga mungkin dipengaruhi oleh operasi penapis.
3. Hanya penapis warna-putar, kecerahan dan kontras menyokong nilai peratusan; semua penapis lain menggunakan parameter tetap.

Peningkatan Prestasi

Pelaksanaan kaedah ini yang lebih pantas telah dibangunkan untuk meningkatkan prestasi, berjalan kira-kira 10 kali lebih pantas daripada yang asal pendekatan. Kaedah baharu dilaksanakan dalam JavaScript, memanfaatkan algoritma pengoptimuman SPSA.

Contoh

Untuk menukar hitam (#000) kepada kuning (#ffff00), penapis berikut rentetan boleh digunakan:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) brightness(100%) contrast(100%);

Kesimpulan

Kaedah ini menyediakan cara yang boleh dipercayai untuk mengubah hitam menjadi warna sasaran tertentu menggunakan hanya penapis CSS. Pelaksanaan yang dioptimumkan memastikan penukaran yang lebih pantas dan tepat.

Atas ialah kandungan terperinci Bagaimanakah Penapis CSS Boleh Mengubah Hitam menjadi Mana-mana Warna Yang Diberikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!