Как создать: вырезанный текст

Узнайте, как использовать CSS для создания респонсивного вырезанного текста (также известного как вырезанный текст или вырезанный текст).

Вырезанный текст - это прозрачный текст, который выглядит так, как будто он вырезан из фонового изображения:

WUHAN

Попробуйте сами

Внимание:Этот пример не подходит для Internet Explorer или Edge.

Как создать вырезанный текст

Шаг 1 - Добавить HTML:

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

Шаг 2 - Добавить CSS:

С помощью свойства mix-blend-mode можно добавить прозрачный текст к изображению. Но Internet Explorer или 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;
  ....
{}

Попробуйте сами