Секция с заголовком и фотографией

Часть текста заголовка, наложенного на фотографию имеет заданный цвет, а выходящая за нее — её фон. Данное наложение происходит автоматически в зависимости от количества текста и размера букв, это можно проверить сузив окно браузера.

Пример:

Gems of War
Puzzle RPG
Gems of War
Puzzle RPG

HTML:


  • Тексты заголовков должны дублироваться в блоке sec-text-d. Реализовать левую его часть через атрибут data-text невозможно, т.к. в WebKit не работает свойство -webkit-background-clip: text; с position: relative; и для второй строки (Puzzle RPG) нужно было бы задавать точные координаты (не стоит забывать, что первая строка может не умещаться в одну линию).
  • Фотографию нужно будет подогнать под размер секции CSS-свойством background-size

CSS:

1

Смотрите также:

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

Ваш комментарий отправлен!