Иногда нам нужно, чтобы изображение применялось в качестве фона только за текстом, а не как полный фон контейнера. Это можно сделать с помощью CSS-свойства background-clip: text.
Свойство CSS
Свойство background-clip: text делает фон обрезанным только по тексту
div {
-webkit-background-clip: text;
background-clip: text;
background-image: url('image.jpg');
color: transparent;
}Примечание! Обратите внимание, что для этого цвет текста должен быть прозрачным.
Что делаем
Приведенный ниже текст будет использовать это изображение в качестве фона:
Итоговый результат будет таким:
HTML и CSS
Мы добавляем такой код в HTML:
<div id="demo-text">This Is A Sample Text</div>В CSS мы добавляем:
#demo-text {
font-size: 80px;
font-weight: 700;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: url('https://s3.amazonaws.com/usefulangle/news/95-5f6cc1ad5575e.jpg');
}Совместимость с браузерами
Все основные браузеры поддерживают свойство background-clip: text напрямую или через префикс.
Firefox и Edge поддерживают свойство background-clip: text.
Chrome и Safari поддерживают свойство с префиксом -webkit-background-clip: text.
