CSS만으로도 배경 이미지가 글자 사이로 비치는 반응형 컷아웃(녹아웃) 텍스트를 손쉽게 구현할 수 있습니다. 핵심은 mix-blend-mode 속성입니다. 이 속성을 활용하면 텍스트 레이어가 배경 이미지와 자연스럽게 혼합되어, 마치 글자 부분이 뚫려 있는 듯한 시각적 효과를 만들 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.image-container {
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
position: relative;
height: 300px;
}
.text {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Cutout Text Example</h1>
<div class="image-container">
<div class="text">FOREST</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과 화면을 확인할 수 있습니다.
코드 핵심 포인트
- background-size: cover — 배경 이미지가 컨테이너 크기에 맞춰 잘리지 않고 꽉 차게 채워집니다.
- font-size: 10vw — 뷰포트 너비를 기준으로 글자 크기가 자동 조절되므로, 화면 크기와 관계없이 일관된 반응형 디자인을 유지합니다.
- mix-blend-mode: multiply — 곱하기 혼합 모드에서 흰색 영역은 배경 이미지가 그대로 드러나고, 검정 영역은 어둡게 유지됩니다. 덕분에 흰색 글자 부분만 숲 이미지가 비치는 녹아웃 효과가 완성됩니다.
- transform: translate(-50%, -50%) — 텍스트 박스를 컨테이너의 정중앙에 정확히 배치합니다.
이처럼 mix-blend-mode와 뷰포트 단위(vw)를 조합하면 별도의 이미지 편집 없이도 순수 CSS만으로 세련된 반응형 타이포그래피 효과를 구현할 수 있습니다.