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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

используйте свойство css background-image, чтобы показать изображение

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

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

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

Ответ 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%; 
}