Блог

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

29 декабря 2021

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

Опубликовано 29 декабря 2021 в 22:11
Обновлено 10 августа 2024 в 10:43
Категория: Блог
Теги: ,

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Связь со мной

uzabila@yandex.ru