镂空 텍스트를 어떻게 만드는가

CSS를 사용하여 반응형镂空 텍스트(剪切文字 또는抠图文字로도 알려짐)를 어떻게 만드는지 배웁니다.

镂空 텍스트는 배경 이미지 위에 잘려진 투명 텍스트로 보입니다:

WUHAN

亲自试一试

주의:이 예제는 Internet Explorer나 Edge에 적용되지 않습니다.

镂空 텍스트를 어떻게 만드는가

第一步 - HTML 추가:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

第二步 - CSS 추가:

mix-blend-mode 속성을 사용하여 이미지에镂空 텍스트를 추가할 수 있습니다. 하지만 IE나 Edge는 지원하지 않습니다:

.image-container {
  background-image: url("img_nature.jpg"); /* 사용할 이미지 - 매우 중요! */
  background-size: cover;
  position: relative; /* 텍스트를 이미지 중앙에 위치시키기 위해 필요합니다 */
  height: 300px; /* 일정한 높이 */
{}
.text {
  background-color: white;
  color: black;
  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: screen; /* 텍스트를 잘라내는 것이 가능하게 합니다 */
{}

亲自试一试

검정색 컨테이너 텍스트를 원하시면, mix-blend-mode 변경하십시오 multiply배경색을 검정으로, 색상을 흰색으로 변경하십시오:

예제

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
{}

亲自试一试