
w3.css
잘라낸 텍스트
CSS를 사용하여 반응형 컷아웃/녹아웃 텍스트를 만드는 방법을 알아보자.
컷아웃 텍스트(또는 녹아웃 텍스트)는 배경 이미지 위에 잘라져 나타나는 투명한 텍스트다.
⭐ 이 예제는 Internet Explorer나 Edge에서는 작동하지 않는다.
잘라낸 텍스트를 만드는 방법
텍스트 크기는 vw “뷰포트 너비”를 의미하는 단위로 설정할 수 있다.
이렇게 하면 텍스트 크기가 브라우저 창 크기에 맞게 조정된다.
1단계) HTML 추가
<div class="image-container"> <div class="text">NATURE</div> </div>
2단계) CSS 추가
이 mix-blend-mode속성을 사용하면 이미지에 잘라낸 텍스트를 추가할 수 있다.
그러나 IE 또는 Edge에서는 지원되지 않는다.
.image-container { background-image: url("img_nature.jpg"); /* The image used - important! */ background-size: cover; position: relative; /* Needed to position the cutout text in the middle of the image */ height: 300px; /* Some height */ } .text { background-color: white; color: black; font-size: 10vw; /* Responsive font size */ font-weight: bold; margin: 0 auto; /* Center the text container */ padding: 10px; width: 50%; text-align: center; /* Center text */ position: absolute; /* Position text */ top: 50%; /* Position text in the middle */ left: 50%; /* Position text in the middle */ transform: translate(-50%, -50%); /* Position text in the middle */ mix-blend-mode: screen; /* This makes the cutout text possible */ }
기본 예시
예제 보기
검은색 컨테이너 텍스트를 원하시면 mix-blend-mode를 “multiply”로 변경하고 background-color를 black으로, color를 white로 변경하자.
예제
.text { background-color: black; color: white; mix-blend-mode: multiply; .... }
기본 예시
예제 보기참고
W3C School - How TO - Cutout Text