방법 - 텍스트 잘라내기
CSS로 반응형 컷아웃/녹아웃 텍스트를 만드는 방법을 알아보세요.
컷아웃 텍스트(또는 녹아웃 텍스트)는 배경 이미지 위에 잘려서 나타나는 투명 텍스트입니다.
자연
참고: 이 예제는 Internet Explorer 또는 Edge에서 작동하지 않습니다.
컷아웃 텍스트를 만드는 방법
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 */
}
검정색 컨테이너 텍스트를 원하면 혼합 혼합 모드를 "곱하기"로 변경하고 배경색을 검정색으로, 색상을 흰색으로 변경하십시오.
예시
.text {
background-color: black;
color: white;
mix-blend-mode:
multiply;
....
}