Установка изображения в качестве фона для текста с помощью CSS

Статьи 13.09.2022 (обновлено)

Иногда нам нужно, чтобы изображение применялось в качестве фона только за текстом, а не как полный фон контейнера. Это можно сделать с помощью CSS-свойства background-clip: text.

Свойство CSS

Свойство background-clip: text делает фон обрезанным только по тексту

div {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: url('image.jpg');
	color: transparent;
}
Примечание! Обратите внимание, что для этого цвет текста должен быть прозрачным.

Что делаем

Приведенный ниже текст будет использовать это изображение в качестве фона:

Установка изображения в качестве фона для текста с помощью CSS

Итоговый результат будет таким:

Итоговый результат
Итоговый результат

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');
}

Codepen

Наше демо в Codepen:

Совместимость с браузерами

Все основные браузеры поддерживают свойство background-clip: text напрямую или через префикс.

Firefox и Edge поддерживают свойство background-clip: text.

Chrome и Safari поддерживают свойство с префиксом -webkit-background-clip: text.

Сергей Ермилов
Опубликовано 13.09.2022
Категория: Статьи
Теги:

Добавить комментарий

Ваш адрес email не будет опубликован.