如何使用 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 即可實現多種設計可能性和動態顏色操作。提供的 JavaScript 函數簡化了流程，讓您可以輕鬆地將這些轉換應用到您的專案中。

以上是如何使用 CSS 濾鏡將黑色轉換為任何顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！