Делаем текст с фоновым изображением. Свойство background-clip - IZIART

Разработка сайтов
индивидуальный дизайн

Главная » CSS » Делаем текст с фоновым изображением. Свойство background-clip

Делаем текст с фоновым изображением. Свойство background-clip

Обновлено: 05.10.2023
css

Давно хотел сделать эффект для текста с фоновым изображением, очень красиво смотрится. Ниже оставляю пример, как легко и быстро это реализовать используя только HTML и CSS.

Реализуется такой эффект благодаря CSS свойству background-clip: text, которое определяет как должен отображаться фон.

САНЯ

<div class="text-wrapper">
    <h3>САНЯ</h3>
</div>
.text-wrapper{
	text-align: center;
}
.text-wrapper h3{
	font-size: 10vw;
        letter-spacing: 20px;
	color: rgba(255,255,255, 0.01);
	-webkit-text-stroke: 10px rgba(255,255,255,0.01);
	background-color: #fff;
	background-repeat: no-repeat;
	background-image: url(https://img2.akspic.ru/image/143943-cvetochnyj_dizajn-uzor-narodnaya_muzyka-tkan-zhivopis-1366x768.jpg);
	background-position: 50% 50%;
	-moz-background-size: 100%;
	background-size: 100%;
       
        /*ключевое свойство*/
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}