CSS3에서 opacity 속성을 활용하면 배경 이미지 위에 반투명한 상자를 만들고, 그 안에 가독성 좋은 텍스트를 손쉽게 배치할 수 있습니다. 이 기법은 배경과 텍스트가 겹칠 때 시각적 대비를 확보하는 데 매우 유용합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.transparentBox {
background: url("https://i.picsum.photos/id/249/1000/300.jpg") repeat;
border: 2px solid black;
}
.transparentText {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
.transparentText p {
margin: 5%;
font-weight: bolder;
color: #000000;
font-size: 20px;
}
</style>
</head>
<body>
<h1>투명한 상자 안의 텍스트 예제</h1>
<div class="transparentBox">
<div class="transparentText">
<p>이것은 투명한 상자 안에 들어 있는 임의의 텍스트입니다</p>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
코드 설명
핵심은 .transparentText 클래스에 적용된 opacity: 0.6;입니다. 이 값은 요소의 불투명도를 지정하며, 0(완전히 투명)부터 1(완전히 불투명) 사이의 값을 가집니다. 여기서는 흰색 배경에 0.6의 불투명도를 적용해 뒤에 있는 배경 이미지가 은은하게 비치면서도 텍스트가 잘 읽히도록 했습니다.
참고로 opacity 속성은 해당 요소의 자식 요소까지 모두 함께 투명하게 만든다는 점을 유의해야 합니다. 배경만 투명하게 하고 텍스트는 선명하게 유지하고 싶다면, rgba() 또는 hsla() 색상 값을 사용해 배경색의 알파 채널만 조절하는 방법도 좋은 대안이 됩니다.