Texto sobre imagen

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.

Diseño>Edición de HTML>expandimos artilugios

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.