CSS フィルターのみを使用して黒を任意の色に変換するにはどうすればよいですか?

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

CSS フィルターは、Web ページ上の要素の外観を操作するための強力なツールです。最も便利なフィルターの 1 つは、要素の色相を変更するために使用できる色相回転フィルターです。ただし、色相回転フィルターは、黒ではない要素の色相を変更する場合にのみ使用できます。

これは、色相回転フィルターがカラー ホイールを中心に要素の色を回転することによって機能するためです。黒はカラー ホイールの一番下に位置するため、黒要素の色を回転する方法はありません。

ただし、CSS フィルターを使用して黒を任意の色に変換する方法はあります。これは、反転、セピア、飽和フィルターを組み合わせて使用​​することで実行できます。

反転フィルターは要素の色を反転します。これは、黒が白になり、白が黒になり、他のすべての色も同様に反転されることを意味します。

セピア フィルターは要素にセピア トーンを追加します。これは、要素が茶色に染まって見えることを意味します。

彩度フィルターは要素の彩度を高めます。これは、要素がより鮮やかでカラフルに見えることを意味します。

反転、セピア、飽和フィルターを組み合わせて使用​​することで、黒を任意の色に変換することができます。たとえば、黒を赤に変換するには、次の CSS コードを使用します。

filter: invert(100%) sepia(100%) saturate(0%);

このコードは、要素の色を反転し、セピア トーンを追加し、彩度を 0% に下げます。結果は赤の要素になります。

このテクニックを使用して、黒を任意の色に変換できます。希望の結果が得られるまで、反転フィルター、セピアフィルター、飽和フィルターの値を調整するだけです。

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