Añadir texto sobre una imagen permite incluir el título de ésta, describirla, o anunciar su procedencia. Esto puede lograrse usando sólo CSS, sin nada de Javascript para no hacer la página más pesada y lenta.
Esta es mi primera frase sobre una imagen. Escribir sobre fotografías es una gran ventaja.
Busca la etiqueta </head> y añade antes estas líneas de CSS:
<style type="text/css">#bljaIMGte{float:left;position:relative;}#bljaIMGte .bljaIMGtex {width:320px;position:absolute;top:10px;left:14px;}</style>
Guarda la plantilla.
A continuación te muestro el código necesario que hará funcionar el truco. Puedes utilizarlo tanto en una entrada como en un gadget o elemento de página html-javascript que encontrarás en el apartado de Diseño.
<div id="bljaIMGte">
<img src="URL DE LA IMAGEN" />
<div class="bljaIMGtex" style="color:#000000;">
<p>PRIMER PARRAFO</p>
<p>SEGUNDO PARRAFO</p>
</div>
</div>
Reemplaza URL DE LA IMAGEN por la dirección de tu imagen. En PRIMER PARRAFO puedes escribir un párrafo inicial y en SEGUNDO PARRAFO el resto de la descripción.
Con la etiqueta <p> y su cierre </p> sólo conseguimos que se produzca un salto de línea, dejando un espacio en blanco entre el contenido.
Para mostrar un simple salto de línea bastará con eliminar dichas etiquetas y añadir al final de la línea en la que presentaremos el salto <br></br>.
También puedes deshacerte de todo esto y escribir seguido.
En color:#000000; puedes personalizar el color (#000000) del texto, haciendo uso de la tabla de colores.
Como me gustan estas cositas jaja, estos pequeños juegos con css. Gracias por ofrecer esta idea porque a la mayoria de nosotros jamás se nos ocurriría.
Muy bueno gracias. ¿Como cambio el tamaño del texto?
Es ideal no tener que depender de un script para realizar esto. Me alegra que te haya sido de utilidad, Andrés.
Anónimo, para cambiar el tamaño del texto añade justo después de color:#000000; la línea:
font-size:13px;
Aumenta o disminuye la cifra (13) para personalizar el tamaño.