Bagaimanakah Saya Boleh Mengubah Hitam kepada Mana-mana Warna RGB Hanya Menggunakan Penapis CSS?

Mewarna semula Hitam menjadi Mana-mana Warna Hanya Menggunakan Penapis CSS

Masalah:
Memandangkan warna RGB sasaran, tukar hitam (#000) kepada warna itu hanya menggunakan CSS penapis.

Penyelesaian:

Penyelesaian melibatkan fungsi yang mengambil warna sasaran sebagai input dan mengembalikan rentetan penapis CSS yang mengubah warna hitam menjadi warna sasaran.

Fungsi ini menggunakan gabungan penapis, termasuk songsang, sepia, tepu, pusingan warna, kecerahan dan kontras, untuk mencapai yang diingini kesan.

1. Terbalik: Terbalikkan warna, bertukar hitam menjadi putih.
2. Sepia: Menambahkan warna sepia, menghangatkan warna .
3. Tepu: Melaraskan ketepuan warna.
4. Hue-Rotate: Memutar rona warna.
5. Kecerahan: Melaraskan kecerahan warna.
6. Kontras: Melaraskan kontras warna.

Pelaksanaan:

function recolorBlack(targetColor) {
  // Convert RGB color to HSL
  const hsl = targetColor.toHSL();

  // Calculate filter values
  const invert = (255 - targetColor.r) / 255;
  const sepia = (targetColor.g - targetColor.b) / 255;
  const saturate = targetColor.s / 100;
  const hueRotate = hsl.h;
  const brightness = targetColor.l / 100;
  const contrast = (targetColor.r - targetColor.g + targetColor.b - 128) / 128;

  // Generate CSS filter string
  return `filter:
    invert(${invert * 100}%)
    sepia(${sepia * 100}%)
    saturate(${saturate * 100}%)
    hue-rotate(${hueRotate}deg)
    brightness(${brightness * 100}%)
    contrast(${contrast * 100}%);`;
}

Contoh:

.element {
  background-color: black;
  filter: recolorBlack(rgb(255, 0, 0));
}

Ini akan menggunakan warna biru warnakan kepada elemen kerana biru ditentukan sebagai parameter 'rgb' ((255, 0, 0) ialah biru).

Nota: Fungsi JavaScript dan pelaksanaan CSS di atas adalah hipotesis untuk tujuan ilustrasi. Pelaksanaan sebenar mungkin berbeza-beza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Hitam kepada Mana-mana Warna RGB Hanya Menggunakan Penapis CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!