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

Question

[Евгений Обыкновенный]

В шапке сайта заголовок с названием сайта, причем первая буква заголовка является одновременно логотипом. Сначала сделал так: <картинка><текст заголовка без первой буквы>. Но гугл начал индексировать заголовок без первой буквы:) Теперь думаю, как скормить гуглу цельный заголовок текстом, но при этом наложить на первую букву картинку с логотипом.
Хотел приклеить блок с текстом и картинку к левому краю общего родителя, но не знаю, как это сделать.
Если указать position: relative; left: x;, то боюсь, не будет адаптивно. position:absolute; тоже не подходит, позиционируется относительно края окна.

Answer 1

[Антон]

Попробуйте так:

div:first-letter {
  color: transparent;
}

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

Comments

[Евгений Обыкновенный]

Хорошо, но проблема в том, что трудно подобрать размер картинки под размер буквы: картинка не помещается или искажается, если задать размеры.

[Евгений Обыкновенный]

Сделал так:

<div style="display:inline-block;width:60px;height:60px;text-align:center;color:transparent;background:url('/logo.png');background-size:100% 100%;">З</div>аголовок

Спасибо за подсказку.

[Евгений Обыкновенный]

А гугл не проигнорирует прозрачную букву?

[Антон]

Добавьте padding: https://jsfiddle.net/gaf9kh4x/

Не нужно разбивать слово на несколько div. Проиндексируется не верно.

[Евгений Обыкновенный]

Антон: а за одно слово не примет, если не div, а span с display:inline-block?

[Антон]

Евгений Обыкновенный: Не подскажу.

Answer 2

[Faliah]

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

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

Быстро сделал обновлённую версию через rem - при изменении font-size у html картинка и текст довольно хорошо подстраиваются, не разъезжаясь

Comments

[Евгений Обыкновенный]

Не получается совсем адаптивно. В Хроме и Мозиле картинка по-разному наезжает.

[Faliah]

Евгений Обыкновенный: Хмм, а дефолтные стили браузеров сброшены? По идее пиксели везде одинаковые и рассчитываться должно одинаково

[Евгений Обыкновенный]

Faliah: даже не пиксели, все em сделал, но все равно по-разному.

[Евгений Обыкновенный]

Faliah: проблема оказалась в том, что у меня первый символ не буква, а математический спецсимвол, и он по-разному в хроме и мозиле отображается. Попробовал обычные буквы - все одинаково работает.

[Faliah]

Евгений Обыкновенный: На счет одинаковых пикселей я имел в виду базовый размер font-size у html, он задан в пикселях, а по-скольку коэффициенты em везде одинаковые, то и рассчитываться все размеры должны одинаково, что в общем-то и подтвердилось

[Faliah]

Евгений Обыкновенный: А еще могли бы вы показать пример этот заголовка с первым математическим спецсимволом? Очень уж интересно какая изначально задумка

Answer 3

[GreatRash]

Это называется буквица.