> 웹 프론트엔드 > CSS 튜토리얼 > 흰색 배경에 사용하기 위해 RGB 색상을 투명한 RGBA 색상으로 변환하려면 어떻게 해야 합니까?

흰색 배경에 사용하기 위해 RGB 색상을 투명한 RGBA 색상으로 변환하려면 어떻게 해야 합니까?

Linda Hamilton
풀어 주다: 2024-11-06 04:12:02
원래의
919명이 탐색했습니다.

How can I convert an RGB color to a transparent RGBA color for use on a white background?

흰색 배경에 대해 RGB를 투명 RGBA로 변환

흰색 배경 위에 색상을 표시할 경우 해당 색상이 투명하게 표시되도록 조정하는 것이 바람직합니다. 시각적 효과를 유지하면서 가능한 한. 이 프로세스에는 RGB에서 RGBA로의 변환이 포함되며, 여기서 알파 채널은 투명도 수준을 결정합니다.

RGB에서 RGBA로의 변환 알고리즘

다음 알고리즘은 RGBA를 계산합니다. 주어진 RGB 색상 구성 요소에 따른 값:

  1. 최소 구성 요소 식별: RGB 구성 요소 중에서 가장 작은 값을 결정합니다(최소 = 최소).
  2. 알파 값 계산: 최소 구성 요소를 알파 값(a)으로 변환: a = (255 - min) / 255.
  3. RGB 구성 요소 크기 조정: 각 RGB 구성 요소에서 최소값을 빼고 결과를 알파 값으로 나눕니다. 이렇게 하면 구성요소의 크기가 조정됩니다.

    • r = (r - min) / a
    • g = (g - min) / a
    • b = (b - min ) / a
  4. RGBA 문자열 형식: 계산된 값을 사용하여 RGBA 문자열을 구성합니다: rgba(r, g, b, a).

구현:

<code class="javascript">function RGBtoRGBA(r, g, b) {
  if ((g == null) && (typeof r === 'string')) {
    var hex = r.replace(/^\s*#|\s*$/g, '');
    if (hex.length === 3) {
      hex = hex.replace(/(.)/g, '');
    }
    r = parseInt(hex.substr(0, 2), 16);
    g = parseInt(hex.substr(2, 2), 16);
    b = parseInt(hex.substr(4, 2), 16);
  }

  var min = Math.min(r, g, b);
  var a = (255 - min) / 255;

  return {
    r: 0 | (r - min) / a,
    g: 0 | (g - min) / a,
    b: 0 | (b - min) / a,
    a: (0 | 1000 * a) / 1000,
    rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')',
  };
}</code>
로그인 후 복사

예:

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') ==
  {
    r: 170,
    g: 85,
    b: 0,
    a: 0.6,
    rgba: 'rgba(170, 85, 0, 0.6)'
  }
로그인 후 복사

위 내용은 흰색 배경에 사용하기 위해 RGB 색상을 투명한 RGBA 색상으로 변환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿