Bagaimana untuk Menukar Hitam kepada Mana-mana Warna Menggunakan Penapis CSS?

Cara menukar warna hitam kepada mana-mana warna tertentu menggunakan hanya penapis CSS

Pengenalan

Matlamat artikel ini adalah untuk menyediakan formula yang akan mengubah warna hitam (#000) ke dalam mana-mana warna sasaran yang diberikan hanya menggunakan penapis CSS. Formula yang terhasil akan dilaksanakan dalam fungsi yang mengambil warna sasaran sebagai hujah dan mengembalikan rentetan penapis CSS yang sepadan.

Tinjauan Keseluruhan Kaedah

Kaedah yang digunakan untuk menjana rentetan penapis CSS melibatkan gabungan penapis CSS seperti songsang, sepia, tepu, pusingan warna, kecerahan dan kontras. Dengan melaraskan parameter penapis ini dengan cara tertentu, adalah mungkin untuk menganggarkan warna sasaran daripada warna hitam permulaan.

Pelaksanaan Kaedah

Coretan kod berikut mengandungi pelaksanaan kaedah dalam JavaScript:

<code class="javascript">class Color {
    // ... (Constructor and other methods)
}

class Solver {
    solve() {
        // ... (Solving algorithm)

        return {
            values: result.values,
            loss: result.loss,
            filter: this.css(result.values)
        };
    }

    // ... (Other methods)
}

function main() {
    // ... (Getting the target color and creating a Solver object)

    let result = solver.solve();

    // ... (Setting the background color of the pixels and displaying the filter details)
}

main();</code>

Penjelasan Kaedah

1. Kod mentakrifkan dua kelas, Warna dan Penyelesai. Kelas Warna mewakili warna dengan komponen merah, hijau dan biru (RGB), dan ia menyediakan kaedah untuk memanipulasi warna. Kelas Solver bertanggungjawab mencari gabungan optimum parameter penapis yang paling sesuai dengan warna sasaran.
2. Kaedah penyelesaian kelas Solver menggunakan gabungan algoritma carian lebar dan sempit untuk menentukan parameter penapis optimum. Algoritma carian luas dengan pantas meneroka julat nilai parameter yang lebih luas, manakala algoritma carian sempit memperhalusi lagi penyelesaian dalam julat yang lebih kecil.
3. Kaedah css kelas Solver menjana rentetan penapis CSS berdasarkan nilai parameter optimum yang ditemui dengan kaedah penyelesaian.
4. Fungsi utama menggesa pengguna untuk warna sasaran dalam format RGB (r, g, b) dan kemudian mencipta objek Penyelesai dengan warna itu sebagai sasaran.
5. Fungsi utama memanggil kaedah penyelesaian objek Solver untuk mencari parameter penapis optimum dan rentetan penapis CSS.
6. Akhir sekali, hasilnya dipaparkan dengan menetapkan warna latar belakang dua piksel menggunakan warna hitam asal dan CSS yang dikira rentetan penapis, masing-masing. Butiran penapis yang dijana juga dipaparkan, termasuk rentetan penapis dan nilai kehilangan yang terhasil. Nilai kehilangan menunjukkan betapa hampirnya anggaran dengan warna sasaran.

Kesimpulan

Coretan kod yang disediakan melaksanakan kaedah yang boleh mengubah warna hitam kepada mana-mana warna tertentu menggunakan gabungan CSS penapis. Kaedah ini cekap dan tepat, dan ia boleh menjana rentetan penapis CSS untuk pelbagai warna sasaran. Adalah penting untuk ambil perhatian bahawa anggaran mungkin tidak sempurna, terutamanya untuk warna tertentu, tetapi ia memberikan anggaran hampir menggunakan penapis CSS sahaja.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Hitam kepada Mana-mana Warna Menggunakan Penapis CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!