Comment puis-je transformer le noir en n'importe quelle couleur RVB en utilisant uniquement des filtres CSS ?

Recoloration du noir dans n'importe quelle couleur en utilisant uniquement des filtres CSS

Problème :
Étant donné une couleur RVB cible, transformer le noir (#000) en cette couleur en utilisant uniquement CSS filtres.

Solution :

La solution implique une fonction qui prend une couleur cible en entrée et renvoie une chaîne de filtre CSS qui transforme le noir en couleur cible.

La fonction utilise une combinaison de filtres, notamment l'inversion, le sépia, la saturation, la rotation de teinte, la luminosité et le contraste, pour obtenir l'effet souhaité. effet.

1. Inverser : Inverse les couleurs, transformant le noir en blanc.
2. Sépia : Ajoute une teinte sépia, réchauffant la couleur .
3. Saturate : Ajuste la saturation du couleur.
4. Hue-Rotate : fait pivoter la teinte de la couleur.
5. Luminosité : ajuste la luminosité de la couleur.
6. Contraste : Ajuste le contraste du couleur.

Mise en œuvre :

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}%);`;
}

Exemple :

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

Cela appliquera un bleu teinte à l'élément car le bleu est spécifié comme paramètre 'rgb' ((255, 0, 0) est bleu).

Remarque : La fonction JavaScript ci-dessus et l'implémentation CSS sont hypothétiques à des fins d'illustration. La mise en œuvre réelle peut varier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!