Как сделать - Вырезанный текст
Узнать, как создать адаптивный текст вырез/нокаут с помощью CSS.
Вырезанный текст
Вырезанный текст (или нокаутирующий текст) - это прозрачный текст, который отображается поверх фонового изображения:
NATURE
Примечание: Этот пример не работает в Internet Explorer или Edge.
Создать вырезанный текст
Шаг 1) Добавить HTML:
Пример
<div class="image-container">
<div class="text">NATURE</div>
</div>
Шаг 2) Добавить CSS:
Свойство mix-blend-mode
позволяет добавлять текст выреза к изображению. Однако он не поддерживается в IE или 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" и background-color на черный, и color на белый: