Come creare: testi tagliati

Impara come creare testi tagliati responsivi utilizzando CSS (noto anche come testi tagliati o testi ritagliati).

I testi tagliati sono testi trasparenti che sembrano essere tagliati dall'immagine di sfondo:

WUHAN

Prova da solo

Attenzione:Questo esempio non è adatto per Internet Explorer o Edge.

Come creare testi tagliati

Primo passo - Aggiungi HTML：

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

Secondo passo - Aggiungi CSS：

Puoi aggiungere testi trasparenti all'immagine utilizzando l'attributo mix-blend-mode. Ma Internet Explorer o Edge non lo supportano:

.image-container {
  background-image: url("img_nature.jpg"); /* Immagine utilizzata - molto importante! */
  background-size: cover;
  position: relative; /* Devi posizionare il testo tagliato al centro dell'immagine */
  height: 300px; /* Altezza fissata */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Dimensione del testo responsiva */
  font-weight: bold;
  margin: 0 auto; /* Allinea il contenitore di testo al centro */
  padding: 10px;
  width: 50%;
  text-align: center; /* Allinea il testo al centro */
  position: absolute; /* Posiziona il testo */
  top: 50%; /* Posiziona il testo al centro */
  left: 50%; /* Posiziona il testo al centro */
  transform: translate(-50%, -50%); /* Posiziona il testo al centro */
  mix-blend-mode: screen; /* Questo rende possibile tagliare il testo */
}

Prova da solo

Se desideri testi nel contenitore nero, cambia mix-blend-mode cambia in moltiplica，cambia il colore di sfondo in nero e il colore in bianco：

esempio

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

Prova da solo