Cómo crear: texto hueco

Aprende a usar CSS para crear texto hueco responsivo (también conocido como texto cortado o texto recortado).

El texto hueco es un texto transparente que parece cortado sobre una imagen de fondo:

WUHAN

Prueba por su cuenta

Nota:Este ejemplo no es compatible con Internet Explorer o Edge.

Cómo crear texto hueco

Primer paso - Añade HTML:

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

Segundo paso - Añade CSS:

Puedes usar la propiedad mix-blend-mode para agregar texto hueco a la imagen. Pero IE o Edge no lo soportan:

.image-container {
  background-image: url("img_nature.jpg"); /* Imagen utilizada - ¡muy importante! */
  background-size: cover;
  position: relative; /* Necesita ubicar el texto cortado en el centro de la imagen */
  height: 300px; /* Altura fija */
{}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Tamaño de fuente responsivo */
  font-weight: bold;
  margin: 0 auto; /* Centra el contenedor de texto */
  padding: 10px;
  width: 50%;
  text-align: center; /* Centra el texto */
  position: absolute; /* Ubica el texto */
  top: 50%; /* Coloca el texto en el centro */
  left: 50%; /* Coloca el texto en el centro */
  transform: translate(-50%, -50%); /* Coloca el texto en el centro */
  mix-blend-mode: screen; /* Esto permite cortar texto */
{}

Prueba por su cuenta

Si quieres texto en contenedor negro, cambia mix-blend-mode cambia a multiplicar，cambia el color de fondo a negro y el color a blanco：

ejemplo

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

Prueba por su cuenta