Como criar: texto em branco com recorte

Aprenda a usar CSS para criar texto em branco responsivo (também conhecido como texto cortado ou texto em recorte).

Texto em branco com recorte é um texto transparente que parece ser cortado sobre a imagem de fundo:

WUHAN

Experimente você mesmo

Atenção:Este exemplo não é compatível com o Internet Explorer ou o Edge.

Como criar texto em branco com recorte

Primeiro passo - Adicione HTML:

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

Segundo passo - Adicione CSS:

Você pode usar a propriedade mix-blend-mode para adicionar texto em branco à imagem. Mas o IE ou o Edge não suportam:

.image-container {
  background-image: url("img_nature.jpg"); /* Imagem usada - muito importante! */
  background-size: cover;
  position: relative; /* Necessário localizar o texto cortado no meio da imagem */
  height: 300px; /* Altura fixa */
}
.text {
  background-color: branco;
  color: preto;
  font-size: 10vw; /* Tamanho de fonte responsivo */
  font-weight: bold;
  margin: 0 auto; /* Centraliza o contêiner de texto */
  padding: 10px;
  width: 50%;
  text-align: center; /* Centraliza o texto */
  position: absolute; /* Localiza o texto */
  top: 50%; /* Localiza o texto no centro */
  left: 50%; /* Localiza o texto no centro */
  transform: translate(-50%, -50%); /* Localiza o texto no centro */
  mix-blend-mode: screen; /* Isso permite que o texto seja cortado */
}

Experimente você mesmo

Se você quiser texto branco em um contêiner preto, mude mix-blend-mode mudar para multiplicar，mude a cor de fundo para preto e a cor para branco：

Exemplo

.text {
  background-color: preto;
  color: branco;
  mix-blend-mode: multiply;
  ....
}

Experimente você mesmo