Jak stworzyć: przezroczysty tekst

Naucz się, jak używać CSS do tworzenia responsywnego przezroczystego tekstu (nazywanego również tekstem ciętym lub tekstem wyciętym).

Przezroczysty tekst to tekst przezroczysty, który wygląda jakby został wycięty z tła obrazu:

WUHAN

Spróbuj sam

Uwaga:Ten przykład nie działa w Internet Explorerze ani w Edge.

Jak stworzyć przezroczysty tekst

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

Używając atrybutu mix-blend-mode można dodać przezroczysty tekst do obrazu. Ale IE lub Edge go nie obsługuje:

.image-container {
  background-image: url("img_nature.jpg"); /* Używane zdjęcie - bardzo ważne! */
  background-size: cover;
  position: relative; /* Potrzebujesz umieścić cięcie tekstu w środku obrazu */
  height: 300px; /* Podana wysokość */
{}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Responsywny rozmiar czcionki */
  font-weight: bold;
  margin: 0 auto; /* Wyśrodkuj kontener tekstu */
  padding: 10px;
  width: 50%;
  text-align: center; /* Wyśrodkuj tekst */
  position: absolute; /* Umieść tekst */
  top: 50%; /* Umieść tekst w środku */
  left: 50%; /* Umieść tekst w środku */
  transform: translate(-50%, -50%); /* Umieść tekst w środku */
  mix-blend-mode: screen; /* To umożliwia cięcie tekstu */
{}

Spróbuj sam

Jeśli chcesz czarnego tekstu w kontenerze, ustaw mix-blend-mode zmień na pomnóżzmień kolor tła na czarny, a kolor na biały:

przykład

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

Spróbuj sam