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

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

enter image description here

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

This is how i wanted.

Как я могу это достичь?

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

Ответы

Ответ 1

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

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

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

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

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

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

enter image description here

Использование фонового изображения (исходный ответ 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>

Ответ 2

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

<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

Ответ 3

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

Ответ 4

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