Wie konvertiert man Schwarz mithilfe von CSS-Filtern in eine beliebige Farbe?

Wie man Schwarz nur mit CSS-Filtern in eine beliebige Farbe umwandelt

Einführung

Das Ziel dieses Artikels ist es, eine Formel bereitzustellen, die eine Transformation bewirkt Konvertieren Sie die Farbe Schwarz (#000) ausschließlich mithilfe von CSS-Filtern in eine beliebige Zielfarbe. Die resultierende Formel wird in einer Funktion implementiert, die die Zielfarbe als Argument verwendet und die entsprechende CSS-Filterzeichenfolge zurückgibt.

Übersicht über die Methode

Die Methode, die zum Generieren der CSS-Filterzeichenfolge verwendet wird beinhaltet eine Kombination von CSS-Filtern wie „Invertieren“, „Sepia“, „Sättigen“, „Farbton drehen“, „Helligkeit“ und „Kontrast“. Durch die spezifische Anpassung der Parameter dieser Filter ist es möglich, die Zielfarbe ausgehend von der anfänglichen schwarzen Farbe anzunähern.

Methodenimplementierung

Der folgende Codeausschnitt enthält die Implementierung der Methode in 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>

Erklärung der Methode

1. Der Code definiert zwei Klassen, Farbe und Solver. Die Color-Klasse stellt eine Farbe mit den Komponenten Rot, Grün und Blau (RGB) dar und stellt Methoden zur Manipulation der Farbe bereit. Die Solver-Klasse ist dafür verantwortlich, die optimale Kombination von Filterparametern zu finden, die der Zielfarbe am besten nahekommt.
2. Die Lösungsmethode der Solver-Klasse verwendet eine Kombination aus breiten und engen Suchalgorithmen, um die optimalen Filterparameter zu bestimmen. Der breite Suchalgorithmus durchsucht schnell einen größeren Bereich von Parameterwerten, während der schmale Suchalgorithmus die Lösung innerhalb eines kleineren Bereichs weiter verfeinert.
3. Die CSS-Methode der Solver-Klasse generiert die CSS-Filterzeichenfolge basierend auf den gefundenen optimalen Parameterwerten durch die Lösungsmethode.
4. Die Hauptfunktion fordert den Benutzer zur Eingabe einer Zielfarbe im RGB-Format (r, g, b) auf und erstellt dann ein Solver-Objekt mit dieser Farbe als Ziel.
5. Die Hauptfunktion ruft die Lösungsmethode des Solver-Objekts auf, um die optimalen Filterparameter und CSS-Filterzeichenfolge zu finden.
6. Schließlich wird das Ergebnis angezeigt, indem die Hintergrundfarbe von zwei Pixeln unter Verwendung der ursprünglichen schwarzen Farbe und des berechneten CSS festgelegt wird Filterzeichenfolge. Außerdem werden die generierten Filterdetails angezeigt, einschließlich der Filterzeichenfolge und des resultierenden Verlustwerts. Der Verlustwert gibt an, wie nah die Annäherung an die Zielfarbe ist.

Fazit

Das bereitgestellte Code-Snippet implementiert eine Methode, die Schwarz mithilfe einer CSS-Kombination in jede beliebige Farbe umwandeln kann Filter. Diese Methode ist effizient und genau und kann CSS-Filterzeichenfolgen für eine Vielzahl von Zielfarben generieren. Es ist wichtig zu beachten, dass die Annäherung möglicherweise nicht perfekt ist, insbesondere für bestimmte Farben, aber sie bietet eine genaue Annäherung, wenn nur CSS-Filter verwendet werden.

Das obige ist der detaillierte Inhalt vonWie konvertiert man Schwarz mithilfe von CSS-Filtern in eine beliebige Farbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!