如何僅使用 CSS 濾鏡將黑色轉換為任何 RGB 顏色？

只使用CSS 濾鏡將黑色重新著色為任何顏色

問題：

問題：給定目標RGB 顏色，僅使用CSS 將黑色(#000)轉換為此顏色

解：

此解決方案涉及一個函數，該函數將目標顏色作為輸入並傳回將黑色轉換為目標顏色的CSS 過濾器字串。
1. 此功能使用濾鏡組合，包括反轉、棕褐色、飽和度、色調旋轉、亮度和對比度，以達到所需的效果效果。
2. 反轉：反轉顏色，將黑色變成白色。
3. 棕褐色：加入棕褐色調，暖化顏色.
4. 飽和度：調整飽和度
5. 色相旋轉：旋轉顏色的色調。
6. 亮度：調整顏色的亮度。

對比：調整影像的對比

function recolorBlack(targetColor) {
  // Convert RGB color to HSL
  const hsl = targetColor.toHSL();

  // Calculate filter values
  const invert = (255 - targetColor.r) / 255;
  const sepia = (targetColor.g - targetColor.b) / 255;
  const saturate = targetColor.s / 100;
  const hueRotate = hsl.h;
  const brightness = targetColor.l / 100;
  const contrast = (targetColor.r - targetColor.g + targetColor.b - 128) / 128;

  // Generate CSS filter string
  return `filter:
    invert(${invert * 100}%)
    sepia(${sepia * 100}%)
    saturate(${saturate * 100}%)
    hue-rotate(${hueRotate}deg)
    brightness(${brightness * 100}%)
    contrast(${contrast * 100}%);`;
}

實現：

.element {
  background-color: black;
  filter: recolorBlack(rgb(255, 0, 0));
}

範例：

這將應用藍色為元素著色，因為藍色被指定為「rgb」參數（（255， 0, 0) 是藍色）。

注意： 上述 JavaScript 函數和 CSS 實作是假設的，用於說明目的。實際實施可能會有所不同。

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