¿Cómo poner texto sobre imágenes en html?

Question

Cómo poner texto sobre las imágenes en HTML. Cada vez que ingreso el código siguiente, el texto va debajo de la imagen.

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

Answer 1

El <img> element is empty - no tiene una etiqueta de cierre.

Si la imagen es a background image, use CSS. Si se trata de una imagen de contenido, configure position: relative en un contenedor, luego absolutely position la imagen y/o texto dentro de este.

Answer 2

Debe utilizar CSS con posición absoluta sobre una etiqueta relativamente img. El artículo Text Blocks Over Image proporciona un ejemplo paso a paso para colocar texto sobre una imagen.

Answer 3

Puede crear un div con el mismo tamaño exacto que la imagen.

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

utilizar la propiedad Imagen de fondo CSS para mostrar la imagen

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

more here

nota: esto altere slichtly la semántica del documento. Si es necesario, use javascript para inyectar el div en el lugar de una imagen real.

Answer 4

Puede probar este ...

<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%; 
}