CSS フィルターはどのようにして黒を任意の色に変換できるのでしょうか?

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

はじめに

これ質問では、CSS フィルターのみを使用して、色黒 (#000) を指定されたターゲット色に変換する方法を検討します。この背景は、特に KaTeX の特定の TeX 数学機能に対処するために、背景画像内の SVG の色を変更する必要があることから生じます。

メソッド

提案されたメソッドは CSS を利用します。色変換を実現するフィルター。使用される特定の CSS フィルターは次のとおりです。

• invert(): 色の反転を制御します。
• sepia(): セピア効果を追加します。
• saturate() : 彩度レベルを調整します。
• hue-rotate():色相の値を回転します。
• brightness(): 明るさを変更します。
• contrast(): コントラストを変更します。

実装

CSS フィルター変換の実装は次のとおりです。

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) brightness() contrast();

このフィルタ文字列は次の操作を適用します:

1. 色を白に反転します。
2. セピア効果を適用します。
3. 色を最大レベルまで飽和させます。
4. 色相を希望の色に回転します。
5. 必要に応じて明るさとコントラストを変更します。

考慮事項

1. CSS フィルタは、すべてのブラウザで一貫してサポートされているわけではありません。 .
2. 黒以外の色もフィルターの影響を受ける可能性があります
3. 色相回転、明るさ、コントラストのフィルターのみがパーセント値をサポートします。他のすべてのフィルターは固定パラメーターを使用します。

パフォーマンスの向上

このメソッドのより高速な実装は、パフォーマンスを向上させるために開発され、元のフィルターよりも約 10 倍高速に実行されます。アプローチ。新しいメソッドは、SPSA 最適化アルゴリズムを利用して JavaScript で実装されます。

例

黒 (#000) を黄色 (#ffff00) に変換するには、次のフィルターを使用します。文字列は可能です使用:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) brightness(100%) contrast(100%);

結論

このメソッドは、CSS フィルターのみを使用して黒を指定されたターゲット カラーに変換する信頼性の高い方法を提供します。最適化された実装により、より高速かつ正確な変換が保証されます。

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