CSS에서는 rgb() 함수를 사용해 RGB(Red-Green-Blue) 모델 기반으로 색상을 정의할 수 있습니다. 여기에 알파(Alpha) 값이 추가된 rgba() 함수를 사용하면 투명도까지 조절되는 색상을 손쉽게 지정할 수 있습니다.
rgba() 함수의 구조
rgba() 함수는 네 개의 인자를 받습니다. 첫 번째부터 세 번째 값인 빨강(Red), 초록(Green), 파랑(Blue)은 각각 0~255 사이의 정수나 백분율로 지정하며, 마지막 알파 값은 0(완전히 투명)부터 1(완전히 불투명) 사이의 소수로 투명도를 결정합니다. 예를 들어 rgba(255,0,0,0.9)는 살짝 투명함이 섞인 빨간색을 의미합니다.
예제
아래 코드를 실행하면 rgb()와 rgba() 함수를 활용해 요소의 배경색과 글자색을 설정하는 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color:hsl(0,100%,50%);
}
h2 {
background-color:rgb(0,0,255);
color: rgb(255,255,255);
}
p {
background-color:rgba(255,0,0,0.9);
}
</style>
</head>
<body>
<h1>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>