CSS에서 요소의 배경색에 투명도를 적용하고 싶다면 RGBA() 색상 값을 사용하는 것이 가장 간단하고 효과적인 방법입니다. RGBA는 기존 RGB 색상 값에 알파(Alpha) 채널이 추가된 형태로, 마지막 매개변수를 통해 색상의 불투명도(opacity)를 세밀하게 조절할 수 있습니다.
알파 값은 0.0(완전히 투명)부터 1.0(완전히 불투명) 사이의 숫자로 지정하며, 예를 들어 0.5를 입력하면 해당 색상이 절반 정도의 투명도를 가지게 됩니다.
RGBA 기본 문법
background-color: rgba(빨강, 초록, 파랑, 알파);
- 빨강(Red), 초록(Green), 파랑(Blue): 0~255 사이의 정수 값
- 알파(Alpha): 0.0 ~ 1.0 사이의 소수 값으로 투명도 조절
예제 코드
아래는 RGBA를 활용해 두 개의 div 요소에 서로 다른 배경 투명도를 적용한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 200px;
height: 200px;
background-color: rgb(0, 0, 255);
color: white;
display: inline-block;
}
.transparent {
background-color: rgba(0, 0, 255, 0.582);
}
</style>
</head>
<body>
<h1>RGBA를 사용한 투명도 예제</h1>
<div class="transparent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, accusantium.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, nisi!
</div>
</body>
</html>코드 설명
위 코드에서 첫 번째 div에는 .transparent 클래스가 적용되어 rgba(0, 0, 255, 0.582) 배경색을 가집니다. 즉, 순수한 파란색(rgb(0, 0, 255))에 약 58%의 불투명도가 적용되어 뒤에 있는 내용이 어렴풋이 비치게 됩니다. 반면 두 번째 div는 일반적인 rgb(0, 0, 255) 값을 사용하므로 완전히 불투명한 파란색으로 표시됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면을 확인할 수 있습니다.
추가 팁
- opacity 속성과의 차이:
opacity속성은 요소 전체(텍스트 포함)에 투명도를 적용하지만, RGBA는 배경색 등 특정 색상에만 투명도를 적용하므로 텍스트 가독성을 유지할 수 있습니다. - 8자리 HEX 표기법: 최신 브라우저에서는
#0000FF94처럼 HEX 코드 뒤에 알파 값을 붙여 투명도를 표현할 수도 있습니다. - 호환성: RGBA는 모든 모던 브라우저에서 지원되며, 구형 브라우저 대응이 필요하다면 RGB 폴백(fallback) 값을 함께 작성하는 것이 좋습니다.