Поместить текст поверх изображения

Question

У меня есть это изображение:

Но я хочу разместить текст посередине так:

Как мне этого добиться?

Я хотел бы сделать это в html, поэтому я бы использовал <div> или <span>

Answer 1

Использование псевдоэлементов

Вышеуказанное может быть создано с использованием псевдоэлементов ::before и ::after содержащего элемента. Например, предположим, что мы начали с этого:

<h1>Keep Calm and Stack Overflow</h1>

Мы могли бы настроить таргетинг на два псевдоэлемента, установить их размеры и фоновые изображения и получить тот же эффект, который вы искали выше.

h1::before, h1::after {
    content: ""; display: block; height: 3em;
    background: url('ribbon.png') center center;
}

Выше приведен простой пример того, что вы можете написать. Для более полной демонстрации см. эту скрипку .

Использование фонового изображения (оригинальный ответ 2010 г.)

Создайте div, который будет размером вашего изображения. Затем поместите ваш текст внутри. Используйте поля / отступы для вашего текста, чтобы получить его по центру, и установите text-align в центр для его CSS.

.imgBox  { 
    width: 300px; height: 100px; 
    background-image: url('bg.jpg');
}
.imgText { 
    text-align: center; 
    margin: 0; padding: 25px 0 0 0;
}

<div class="imgBox">
  <p class="imgText">Hello World</p>
</div>

Answer 2

Вы также можете использовать абсолютное позиционирование и z-индекс:

<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>

И в файле CSS:

.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }

Несколько приятных ссылок: http://www.w3schools.com/Css/pr_pos_z-index.asp

Answer 3

Создайте div такой же ширины и высоты, как ваше изображение, и установите изображение в качестве фона для div, используя css. Поместите центр вертикального выравнивания и центр горизонтального выравнивания на элемент div и добавьте к нему текст.

Answer 4

Для меня это выглядит как <img>, затем какой-то текст, например, <span>, а затем второй <img>. Если вы положите их в контейнер с text-align: center, все должно быть в порядке.