Functions

Editing

rgba(<rgb()>params)

앞으로 사용되지 않을 예정이므로 주의하기 바란다.

rgb() 함수로 대체 가능하며 폐기될 예정이다.

기본적으로 rgb() 함수와 동일하며 추가적으로 투명도(alpha)를 지정할 수 있다.

설명

CSS Color Module 4 이전에는 hsla() 함수와 함께 투명도를 지원하는 유일한 함수였으나 CSS Color Module 4에서는 업데이트된 rgb() 함수와 동일한 기능을 갖게 되었다. 따라서 rgba() 함수는 레거시가 되었으며 더이상 사용되지 않을 예정이다.

매개 변수

rgb() 함수의 매개 변수를 나타낸다. 레거시로 red, green, blue 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

  • CSS Color Module Level 4
    rgb( [<percentage> | none]{3} [ / [<alpha-value> | none] ]? )

    <percentage>는 0~255 범위를 백분율로 지정할 수 있다.

    구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

  • CSS Color Module Level 4
    rgb( [<number> | none]{3} [ / [<alpha-value> | none] ]? )

    <number>는 red, green, blue 값을 각각  0~255 범위 내에서 지정이 가능하다. 

    구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

  • CSS Color Module Level 4Legacy
    rgb( <percentage>#{3} , <alpha-value>? )

    레거시(legacy) 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.

  • CSS Color Module Level 4Legacy
    rgb( <number>#{3} , <alpha-value>? )

    레거시(legacy) 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.

Details

포함된 타입

  • <alpha-value>

    0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

    • <number> | <percentage>
    Details

    포함된 타입

    • <number>

      정수 또는 실수를 표현한다.

    • <percentage>

      어떠한 기준으로 부터 백분율로 표현한다.

  • <number>

    정수 또는 실수를 표현한다.

    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
  • <percentage>

    어떠한 기준으로 부터 백분율로 표현한다.

    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

구문

background: rgba(255, 255, 0, 0.5);
CSS Color Module Level 4Legacy
Example

버전 명세

Modules
Module NameStatusSummary
CSS Color Module Level 4

Last review date: 2022-11-12

지원 웹브라우저