CSS フィルターを使用して黒を任意の色に変換する方法

CSS フィルターのみを使用して黒を任意の色に変換する方法

はじめに

この記事の目的は、変換する数式を提供することです。 CSS フィルターのみを使用して、黒 (#000) を任意のターゲット カラーに変換します。結果の数式は、ターゲットの色を引数として受け取り、対応する CSS フィルター文字列を返す関数に実装されます。

メソッドの概要

CSS フィルター文字列の生成に使用されるメソッド反転、セピア、彩度、色相回転、明るさ、コントラストなどの CSS フィルターの組み合わせが必要です。これらのフィルターのパラメーターを特定の方法で調整することで、開始時の黒色からターゲットの色に近似することができます。

メソッドの実装

次のコード スニペットには、メソッドの実装が含まれています。 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>

メソッドの説明

1. コードでは、Color と Solver の 2 つのクラスを定義します。 Color クラスは、赤、緑、青 (RGB) コンポーネントで色を表し、色を操作するメソッドを提供します。 Solver クラスは、ターゲット カラーに最もよく近似するフィルター パラメーターの最適な組み合わせを見つける役割を果たします。
2. Solver クラスのソルバー メソッドは、ワイド検索アルゴリズムとナロー検索アルゴリズムの組み合わせを使用して、最適なフィルター パラメーターを決定します。広い検索アルゴリズムは、より広い範囲のパラメーター値を迅速に探索しますが、狭い検索アルゴリズムは、より狭い範囲内でソリューションをさらに絞り込みます。
3. Solver クラスの css メソッドは、見つかった最適なパラメーター値に基づいて CSS フィルター文字列を生成します。 solve メソッドを使用します。
4. main 関数は、ユーザーに RGB 形式 (r、g、b) でターゲット色の入力を求め、その色をターゲットとして使用して Solver オブジェクトを作成します。
5. main 関数は、Solver オブジェクトのsolve メソッドを呼び出して、最適なフィルター パラメーターと CSS フィルター文字列を見つけます。
6. 最後に、元の黒色と計算された CSS を使用して 2 ピクセルの背景色を設定することによって、結果が表示されます。それぞれフィルタ文字列。フィルター文字列や結果として生じる損失値など、生成されたフィルターの詳細も表示されます。損失値は、近似がターゲットの色にどれだけ近いかを示します。

結論

提供されたコード スニペットは、CSS の組み合わせを使用して黒を任意の指定された色に変換できるメソッドを実装します。フィルター。この方法は効率的かつ正確で、広範囲のターゲット カラーに対応する CSS フィルター文字列を生成できます。特に特定の色の場合、近似は完全ではない可能性があることに注意することが重要です。ただし、CSS フィルターのみを使用すると、近似が得られます。

以上がCSS フィルターを使用して黒を任意の色に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。