CSS 투명도란 무엇인가?
CSS에서 요소의 불투명도(opacity) 또는 투명도(transparency)를 조절하려면 opacity 속성을 사용합니다. 이 속성은 0.0부터 1.0 사이의 값을 가지며, 값이 작을수록 더 투명해집니다.
- 1.0 – 완전히 불투명 (기본값)
- 0.5 – 반투명
- 0.0 – 완전히 투명 (보이지 않음)
예를 들어, 요소를 30%만 보이게 설정하고 싶다면 다음과 같이 작성합니다.
opacity: 0.3;
rgba() 색상값으로 배경만 투명하게 하기
opacity 속성은 요소 전체(텍스트 포함)에 영향을 줍니다. 반면 rgba() 색상값을 사용하면 배경색만 반투명하게 만들고 텍스트는 선명하게 유지할 수 있습니다. 아래 예제에서 두 방식의 차이를 함께 확인해 보세요.
예제 코드
다음은 CSS로 투명도를 적용한 완전한 HTML 코드입니다.
<!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);
}
img {
width: 200px;
height: 200px;
}
.transparent-img {
opacity: 0.3;
}
</style>
</head>
<body>
<h1>투명도(Opacity) 예제</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>
<hr>
<img src="https://i.picsum.photos/id/487/300/300.jpg">
<img class="transparent-img" src="https://i.picsum.photos/id/487/300/300.jpg">
</body>
</html>코드 설명
- .transparent 클래스:
rgba(0, 0, 255, 0.582)를 사용하여 파란 배경을 약 58% 불투명도로 설정합니다. 텍스트는 그대로 선명하게 유지됩니다. - .transparent-img 클래스:
opacity: 0.3;을 적용하여 이미지 전체가 30%만 보이도록 합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
왼쪽 div는 rgba() 덕분에 배경만 반투명하고 텍스트는 잘 보이는 반면, 오른쪽 이미지는 opacity 속성 때문에 전체적으로 흐릿하게 표시되는 것을 확인할 수 있습니다.