如何仅使用 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中文网其他相关文章！