CSS에서 opacity 속성을 사용하면 요소의 배경에 투명도를 간단하게 추가할 수 있습니다. 이 속성은 0부터 1 사이의 값을 가지며, 0은 완전한 투명, 1은 완전한 불투명을 의미합니다. 값이 작아질수록 요소는 점점 더 투명하게 보입니다.
예제
아래 코드를 실행하면 서로 다른 투명도(0.2, 0.5, 1)가 적용된 세 개의 div 요소를 한눈에 비교할 수 있습니다. 구버전 Internet Explorer와의 호환성을 위해 filter: alpha(opacity=...) 구문도 함께 작성되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #808000;
padding: 20px;
}
div.one {
opacity: 0.2;
filter: alpha(opacity=20);
}
div.two {
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Check transparency in the below section:</p>
<div class = "one">
<p>opacity 0.2</p>
</div>
<div class = "two">
<p>opacity 0.5</p>
</div>
<div>
<p>opacity 1</p>
</div>
</body>
</html>
참고 사항
opacity 속성은 배경뿐만 아니라 요소 내부의 텍스트와 자식 요소 전체에 영향을 준다는 점에 유의하세요. 배경만 반투명하게 처리하고 텍스트는 선명하게 유지하고 싶다면, rgba() 또는 hsla() 색상 값을 background-color에 사용하는 것이 좋습니다. 예를 들어 background-color: rgba(128, 128, 0, 0.5);처럼 작성하면 배경에만 투명도가 적용되어 가독성을 해치지 않으면서 원하는 시각 효과를 얻을 수 있습니다.