Escribiendo sobre una imagen.

Hace tiempo veíamos la forma de añadir texto sobre una imagen, al parecer el tema no quedó demasiado claro respecto como por ejemplo estilos para la fuente del texto o posicionar ese texto a nuestro antojo.

Lorem Ipsum is simply dummy text of the printing and typesetting industry..

Lorem Ipsum has been the industry's standard dummy text...

Para el ejemplo añadimos lo siguiente:

<div style="float: left; position: relative;">

<img alt="texto-imagen" src="url de la imagen" />

<div style="color: black; font-family: Courier; left: 20px; position: absolute; top: 55px; width: 150px;">

Lorem Ipsum is simply dummy text of the printing and typesetting industry..

Lorem Ipsum has been the industry's standard dummy text...

</div>

</div>

Y entendemos lo que añadimos.
-Subimos la imagen al editor de entradas, en la pestaña de Edición de HTML copiamos la url de la imagen y la añadimos donde dice "url de la imagen"
-Con la propiedad float estamos adaptando el texto respecto al fondo, al escoger left lo adaptamos a la izquierda, si fuera a la derecha sería right.
-En la propiedad position escogemos absolute para ubicar el texto en un lugar concreto.
-En style="color: black; font-family: Courier; es el sitio que podemos añadir estilos para la fuente siempre separados por por punto y coma ";"
-En la misma línea de los estilos de fuente añadimos el espacio de separación del extremo ya sea izquierdo (left) o derecho ( right)  indicando los pixels (left: 20px; para el ejemplo)
-Al igual que dimos un espacio de separación a los extremos lo hacemos del borde superior top: 55px; si el texto cubre todo el espacio de alto de la imagen añadimos espacio inferior con bottom: xx;
-Decidimos también el ancho que medirá el texto, lo haremos añadiendo width: 150px a más o menos anchura para el texto modificamos el valor de 150px