[CSS] 텍스트를 이미지 마스크로 사용하기

텍스트 이미지 마스크

 

 

이미지 위에 텍스트

 

mask

이미지위에 텍스를 배치한 모습입니다. 아래 HTML, CSS 를 참고해 주세요.

HTML 코드:

<div class="box">
	<div>mask</div>
</div>

 

CSS 코드:

.box {
	width: 400px;
	height: 200px; 
	font-size: 7em;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: Uppercase;
	color: black;
 
	background-image: url("https://blog.kakaocdn.net/dn/euSYBp/btrHZfA7C6v/ZmOcoBN6VqMcFA57CrkBcK/img.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}
.box div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

 

Blend Mode 로 텍스트를 이미지 마스크로 사용하기

 

mask

Blen Mode 로 텍스트를 이미지 마스크로 만든 모습입니다. 

 

.box div {
	mix-blend-mode: lighten;
	color: black;
	background-color: white;
}

흰색 배경에 검정색 텍스트가 마스크로 사용되었습니다.

 

 

mask

Blen Mode 로 텍스트를 이미지 마스크로 만든 모습입니다.

 

.box div {
	mix-blend-mode: darken;
	color: white;
	background-color: black;
}

검정색 배경에 흰색 텍스트가 마스크로 사용되었습니다.

 

Background Clip 으로 텍스트를 이미지 마스크로 사용하기

 

mask

Background Clip 으로 텍스트를 이미지 마스크로 만든 모습입니다.

 

.box {
	/* 배경이미지 코드를 제거해주세요
	background-image: url("https://blog.kakaocdn.net/dn/euSYBp/btrHZfA7C6v/ZmOcoBN6VqMcFA57CrkBcK/img.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
    */
}
 
.box div {
	/* 여기로 배경이미지 코드를 옮겨주세요 */
	background-image: url("https://blog.kakaocdn.net/dn/euSYBp/btrHZfA7C6v/ZmOcoBN6VqMcFA57CrkBcK/img.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
    
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

배경이미지 코드를 .box → .box div 로 옮겨줘야 합니다. Blend Mode 와 차이점은 배경이 투명하게 처리된다는 것입니다.