Texto sobre cualquier imagen usando CSS
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:
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.
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.
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.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!