CSS를 활용하면 이미지 위에 반투명한 배경과 함께 텍스트를 얹는 효과를 손쉽게 구현할 수 있습니다. 이 기법은 이미지 캡션, 배너, 카드형 UI 등에서 자주 사용되며, 핵심은 position 속성과 rgba 색상의 조합입니다.
구현 원리
먼저 이미지를 감싸는 컨테이너 요소에 display: inline-block;과 position: relative;를 지정합니다. 그다음 텍스트가 들어갈 영역에는 position: absolute;를 적용하고 bottom: 0;으로 설정해 이미지 하단에 붙여 줍니다.
배경색은 rgba(29, 6, 43, 0.5)처럼 마지막 알파 값(투명도)을 0.5로 지정하는 것이 중요합니다. 이렇게 하면 짙은 색 배경이 50%만 불투명해져 뒤에 있는 이미지가 은은하게 비치게 됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer .imageContent {
position: absolute;
bottom: 0;
background: rgba(29, 6, 43, 0.5); /* 불투명도 0.5의 어두운 배경 */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<h2>투명한 텍스트가 있는 이미지</h2>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg">
<div class="imageContent">
<h1>풍경</h1>
<h3>울타리와 철조망, 잔디가 어우러진 아름다운 풍경</h3>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 이미지 하단에 반투명한 어두운 배경이 깔리고, 그 위에 밝은 회색 계열의 제목("풍경")과 설명 텍스트가 나타납니다. 배경이 완전히 불투명하지 않기 때문에 뒤쪽 이미지가 비쳐 보이며, 텍스트 가독성과 이미지의 분위기를 동시에 살릴 수 있다는 장점이 있습니다.