Как поместить текст поверх изображений в HTML?

Question

Как поместить текст поверх изображений в HTML. Каждый раз, когда я ввожу приведенный ниже код, текст идет под изображением.

<img src="example.jpg">Text</img>

Answer 1

Вы можете создать div с точно таким же размером, как изображение.

<div class="imageContainer">Some Text</div>

используйте свойство css background-image для отображения изображения

 .imageContainer {
       width:200px; 
       height:200px; 
       background-image: url(locationoftheimage);
 }

подробнее здесь

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

Answer 2

Вам нужно использовать абсолютно позиционированный CSS поверх относительно позиционированного тега img.В статье Текстовые блоки над изображением приведен пошаговый пример размещения текста над изображением.

Answer 3

Элемент <img> пуст - у него нет конечного тега.

Если изображение фоновое изображение, используйте CSS .Если это изображение содержимого, тогда установите position: relative для контейнера, тогда абсолютно поместите изображение и / или текст внутри него.

Answer 4

Вы можете попробовать это ...

<div class="image">

      <img src="" alt="" />

      <h2>Text you want to display over the image</h2>

</div>

CSS

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

Answer 5

Использование absolute в качестве position не отзывчиво + удобно для мобильных устройств. Я бы предложил использовать div с background-image, а затем поместить текст в div, чтобы поместить текст поверх изображения. В зависимости от вашего HTML, вам может понадобиться height с vh значением