Фон текста в виде изображения

22.02.2019

Фон текста в виде изображения

Рубрика: Разработчику

Сегодня CSS позволяет реализовать оформление веб-страницы так, как желает ваше воображение. Хотим показать простое, но интересное решение для текстовых блоков - мы заменим цветовую заливку текста на изображение.

 

 

Размещаем на нашей веб-странице HTML элемент с текстом, например заголовок:

<h1 class="text">WORKBox</h1>

 

В CSS файл добавляем запись для класса "text":

.text {
/* настройка блока и текста */
    display:block;
    line-height:150px;
    font-family:arial;
    font-size:100px;
    font-weight:bold;
/* настройка фонового изображения */
    background-image: url('ссылка на изображение');
    background-position: center center;
/* настройка эффекта */
    color:transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

 

Пример результата работы стиля можно посмотреть на странице: https://muststyle.ru/workbox

Чтобы оставить комментарий выполните вход на сайт или зарегистрируйтесь

ВХОД / РЕГИСТРАЦИЯ
Ваш email:

 

Последние комментарии

MUST-STYLE03.04.2021 / 10:58:25
ThumbsUP v.1.4 → Исправлена ошибка, при которой н...
MUST-STYLE28.10.2020 / 11:41:28
ThumbsUP v.1.3 → Исправлена ошибка при загрузки р...
MUST-STYLE28.10.2020 / 11:37:49+2
История обновлений ThumbsUP
MUST-STYLE06.10.2020 / 22:51:36
WORKBox CRM ver.1.8 → Обновлены права доступа пол...
MUST-STYLE27.08.2020 / 08:12:34
WORKBox CRM ver.1.7.5 → На странице регистрации ...
Разработка имиджевых сайтов, разработка фирменного стиля, брендбук