CSS 필터만 사용하여 검정색을 RGB 색상으로 변환하려면 어떻게 해야 합니까?

CSS 필터만 사용하여 검정색을 모든 색상으로 다시 칠하기

문제:
대상 RGB 색상이 주어지면, CSS만 사용하여 검정색(#000)을 해당 색상으로 변환합니다. 필터.

해결책:

해결책에는 대상 색상을 입력으로 사용하고 검정색을 대상 색상으로 변환하는 CSS 필터 문자열을 반환하는 함수가 포함됩니다.

이 기능은 반전, 세피아, 채도, 색상 회전, 밝기, 대비를 포함한 필터 조합을 사용하여 원하는 결과를 얻습니다. 효과.

1. 반전: 색상을 반전하여 검정색을 흰색으로 바꿉니다.
2. 세피아: 세피아 색조를 추가하여 색상을 따뜻하게 합니다. .
3. 채도: 색상의 채도.
4. 색상 회전: 색상의 색상을 회전합니다.
5. 밝기: 색상의 밝기를 조정합니다.
6. 대비: 화면의 대비를 조정합니다. color.

구현:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!