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

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

この記事では、黒 (#000) を次の色に変換する方法を検討します。 CSSフィルターのみを使用して任意の色を指定できます。この変換には黒色に適用される一連の計算が含まれ、画像や要素内に存在する他の色に影響を与えることなくターゲットの色が得られます。

CSS フィルター変換の関数

<code class="js">function transformBlack(targetColor) {
  // Convert target color to HSL
  const targetHSL = ... // Implement HSL conversion here

  // Calculate filter values using SPSA algorithm
  const filterValues = ... // Implement SPSA algorithm here

  // Construct CSS filter string
  const filterString = "invert(" + filterValues[0] + "%) " +
                      "sepia(" + filterValues[1] + "%) " +
                      "saturate(" + filterValues[2] + "%) " +
                      "hue-rotate(" + filterValues[3] + "deg) " +
                      "brightness(" + filterValues[4] + "%) " +
                      "contrast(" + filterValues[5] + "%)";

  return filterString;
}</code>

実装および例

<code class="html"><p>Real pixel, color applied through CSS <code>background-color</code>:</p>
<div class="pixel realPixel" style="background-color: #000"></div>

<p>Filtered pixel, color applied through CSS <code>filter</code>:</p>
<div class="pixel filterPixel" style="filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) brightness(100%) contrast(100%);"></div>

<p class="filterDetail"></p>
<p class="lossDetail"></p></code>

<code class="js">const targetColor = ... // User-provided target color

const filterString = transformBlack(targetColor);
const filterPixel = document.querySelector(".filterPixel");
filterPixel.style.filter = filterString;

const filterDetail = document.querySelector(".filterDetail");
filterDetail.innerHTML = filterString;</code>

利点

• CSS のみのソリューション: 追加のライブラリや複雑なコードは必要ありません。
• 広い色範囲: 黒を膨大な色に変換できます。
• 微調整: フィルター値を調整して、特定の色またはユースケースに合わせて変換を最適化します。 .
• パフォーマンス: 効率的かつ軽量で、動的な色の変更やアニメーションに適しています。

結論

CSS フィルターを利用すると、シームレスに次のことができます。黒を任意の色に変換し、CSS のみを介して多彩なデザインの可能性と動的な色の操作を可能にします。提供されている JavaScript 関数によりプロセスが合理化され、これらの変換をプロジェクトに簡単に適用できるようになります。

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