CSS3 opacity 속성이란?
CSS3의 opacity 속성은 HTML 요소의 투명도를 조절하는 데 사용됩니다. 값은 0.0(완전히 투명)부터 1.0(완전히 불투명) 사이에서 지정할 수 있으며, 숫자가 작아질수록 요소가 더 투명하게 보입니다.
단, opacity 속성은 배경색뿐만 아니라 해당 요소 안의 텍스트와 자식 요소까지 함께 반투명하게 만든다는 점을 기억해야 합니다.
opacity 속성 사용 예제
다음 예제는 세 개의 문단 요소에 각각 빨강, 초록, 파랑 배경색(RGB)을 지정하고, 동일하게 opacity 값을 0.6으로 설정한 모습을 보여줍니다.
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p id="m1">빨간색 (Red)</p>
<p id="m2">초록색 (Green)</p>
<p id="m3">파란색 (Blue)</p>
</body>
</html>
코드 설명
#m1: 빨간색 rgb(255,0,0) 배경에 opacity 0.6 적용#m2: 초록색 rgb(0,255,0) 배경에 opacity 0.6 적용#m3: 파란색 rgb(0,0,255) 배경에 opacity 0.6 적용
이 코드를 브라우저에서 실행하면 세 가지 색상 모두 원래 색보다 연하게 표시되며, 이는 각 요소가 60% 불투명한 상태로 렌더링되기 때문입니다.
참고 : RGBA 색상값과의 차이
배경만 투명하게 하고 텍스트는 선명하게 유지하고 싶다면 opacity 대신 RGBA 색상값을 사용하는 것이 좋습니다. 예를 들어 background-color:rgba(255,0,0,0.6);처럼 작성하면 배경에만 투명도가 적용되고 글자는 그대로 유지됩니다.