Как наложить картинку на первую букву?

В шапке сайта заголовок с названием сайта, причем первая буква заголовка является одновременно логотипом. Сначала сделал так: <картинка><текст заголовка без первой буквы>. Но гугл начал индексировать заголовок без первой буквы:) Теперь думаю, как скормить гуглу цельный заголовок текстом, но при этом наложить на первую букву картинку с логотипом.
Хотел приклеить блок с текстом и картинку к левому краю общего родителя, но не знаю, как это сделать.
Если указать position: relative; left: x;, то боюсь, не будет адаптивно. position:absolute; тоже не подходит, позиционируется относительно края окна.
jSP8FQT.png
  • Вопрос задан
  • 344 просмотра
Решения вопроса 2
conturov
@conturov
Попробуйте так:
div:first-letter {
  color: transparent;
}

Прозрачность на первый символ и добавить бекграунд.
Ответ написан
@Faliah
А что конкретно вы подразумеваете под "не будет адаптивно"? position: absolute Выравнивает элемент относительно ближайшего родительского блока, у которого position: relative. Если таких элементов нет, то им становится body.
Вот быстрая реализация: Выглядит не плохо

Её минусы в том, что размеры статические, но если поиграть с процентами, em или rem, то можно сделать полностью динамические размеры.

Быстро сделал обновлённую версию через rem - при изменении font-size у html картинка и текст довольно хорошо подстраиваются, не разъезжаясь
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@GreatRash
Это называется буквица.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы