RGBA는 색상 값과 투명도를 설정할 수 있는 CSS 색상입니다.
아래는 rgba()를 사용하여 투명도를 50%로 설정한 흰색입니다.
피 {
색상: rgba(255, 255, 255, 0.5);
}
RGBA는 RGB 색상 모델의 확장입니다. 이 약어는 빨간색, 녹색, 파란색의 세 가지 기본 색상의 첫 글자를 나타내며 알파 값은 색상의 투명도/불투명도를 나타냅니다.
RGBA 구문
RGBA 색상 표현의 형식은 다음과 같습니다.
RGBA(빨간색, 녹색, 파란색, 알파)
처음 세 값(빨간색, 녹색, 파란색)의 범위는 0~255 사이의 정수 또는 0%~100% 사이의 백분율입니다. 이 값은 의도한 색상에 빨간색, 녹색, 파란색의 3원색이 얼마나 포함되어 있는지를 나타냅니다.
순수한 빨간색으로 설정하려면 빨간색 매개변수를 전체, 즉 255로 설정하고 녹색 및 파란색 매개변수를 0으로 설정합니다.
배경색: rgba(255, 0, 0, 1);
결과:
백분율을 사용할 수도 있습니다.
배경색: rgba(100%, 0%, 0%, 1);
결과:
네 번째 값인 alpha는 색상의 투명도/불투명도를 지정하며 범위는 0.0에서 1.0입니다.
다음 예는 투명도가 50%인 노란색입니다.
색상: rgba(255, 242, 0, 0.5);
CSS 반투명은 Firefox, IE 및 Chrome과 호환됩니다. 현재 브라우저 버전은 상대적으로 높습니다. 프로젝트에 자유롭게 사용해도 됩니다.