Изображение как фон текста

Иногда нам нужно, чтобы изображение применялось в качестве фона только за текстом, а не как полный фон контейнера. Это можно сделать с помощью 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.