Comment convertir le noir en n'importe quelle couleur à l'aide des filtres CSS ?

Comment transformer le noir en n'importe quelle couleur donnée en utilisant uniquement des filtres CSS

Introduction

Le but de cet article est de fournir une formule qui transformera la couleur noire (#000) dans n'importe quelle couleur cible donnée en utilisant uniquement des filtres CSS. La formule résultante sera implémentée dans une fonction qui prend la couleur cible comme argument et renvoie la chaîne de filtre CSS correspondante.

Présentation de la méthode

La méthode utilisée pour générer la chaîne de filtre CSS implique une combinaison de filtres CSS tels que l'inversion, la sépia, la saturation, la rotation de teinte, la luminosité et le contraste. En ajustant les paramètres de ces filtres d'une manière spécifique, il est possible de se rapprocher de la couleur cible à partir de la couleur noire de départ.

Implémentation de la méthode

L'extrait de code suivant contient l'implémentation de la méthode en 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>

Explication de la méthode

1. Le code définit deux classes, Color et Solver. La classe Color représente une couleur avec des composants rouge, vert et bleu (RVB) et fournit des méthodes pour manipuler la couleur. La classe Solver est chargée de trouver la combinaison optimale de paramètres de filtre qui se rapproche le mieux de la couleur cible.
2. La méthode de résolution de la classe Solver utilise une combinaison d'algorithmes de recherche larges et étroits pour déterminer les paramètres de filtre optimaux. L'algorithme de recherche large explore rapidement une plage plus large de valeurs de paramètres, tandis que l'algorithme de recherche étroite affine davantage la solution dans une plage plus petite.
3. La méthode CSS de la classe Solver génère la chaîne de filtre CSS en fonction des valeurs de paramètres optimales trouvées. par la méthode de résolution.
4. La fonction principale demande à l'utilisateur une couleur cible au format RVB (r, g, b), puis crée un objet Solver avec cette couleur comme cible.
5. La fonction principale appelle la méthode de résolution de l'objet Solver pour trouver les paramètres de filtre optimaux et la chaîne de filtre CSS.
6. Enfin, le résultat est affiché en définissant la couleur d'arrière-plan de deux pixels en utilisant la couleur noire d'origine et le CSS calculé. chaîne de filtre, respectivement. Les détails du filtre généré sont également affichés, y compris la chaîne de filtre et la valeur de perte résultante. La valeur de perte indique à quel point l'approximation est proche de la couleur cible.

Conclusion

L'extrait de code fourni implémente une méthode qui peut transformer le noir en n'importe quelle couleur donnée en utilisant une combinaison de CSS filtres. Cette méthode est efficace et précise et peut générer des chaînes de filtre CSS pour une large gamme de couleurs cibles. Il est important de noter que l'approximation n'est peut-être pas parfaite, notamment pour certaines couleurs, mais elle fournit une approximation proche en utilisant uniquement des filtres CSS.

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!