x
 
↑
Июнь
•
•

6 •

•

2 •
↓
Генерал Кеноби
28 июня 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Можно ли сверстать заголовок так, чтобы вместо цвета он был залит изображением?

Добавьте изображение в фон заголовка и задайте маску по тексту:

 
<!-- index.html -->
<h1>Заголовок с фоном</h1>

/* style.css */
h1 {
  text-transform: uppercase;
  font-size: 50px;
  background: url(https://placeimg.com/400/400/nature);
  -webkit-background-clip: text;
  color: transparent;
}

Заголовок с фоном

Пример в отдельном окне
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии
Игорь Пнев
28 июня 2018

Стоит упомянуть что работает за префиксами, IE11 не поддерживается. Если нужна поддержка IE11, можно фоллбэк сделать на СВГ. читается гуглом во всяком случае.

28 июня 2018

Чтобы не собирать СВГ вручную, можно воспользоваться полифилом: https://github.com/TimPietrusky/background-clip-text-polyfill
Николай Яковенко
29 июня 2018

Видел пример (ссылку к сожалению не сохранил), где вместо изображения было видео. Как сделать такое?
Андрей Пулин
19 июля 2018

Прошу прощения, а этот совет сработает в паре с вашим следующим, где движущийся градиент на фоне?
Переливающийся градиент → маска по тексту → профит

8 августа 2018

Андрей, ага, крутая идея: https://codepen.io/stfoo/pen/mjzNgg
Илья Стрельцын
9 августа 2018

Лучше не color: transparent, а -webkit-text-fill-color: transparent. Работает там же, где и -webkit-background-clip: text, а в неподдерживающих браузерах останется просто непокрашенный текст. А с предложенным вариантом заголовок в них просто пропадёт.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Типовые решения в вёрстке. Как сверстать гамбургерное меню Рецепт: бегущая строка на сайте без Яваскрипта 2 • Как правильно работать с начертаниями подключаемого шрифта в ЦСС? Что дизайнеру стоит знать о якорных ссылках?




Недавно всплыло

1 • 1 • Нерешённая задача графдизайна. Медпункт 6 • 1 •