/* ANUNCIO4 */

Poner texto sobre una imagen usando CSS

Añadir texto sobre una imagen nos permite incluir el título, describirla, o poner alguna frase. Esto usando sólo CSS, sin necesidad de Javascript para no hacer la página más pesada y lenta.


Este es un ejemplo de texto sobre una imagen.
Un truco muy util para nuestro blog.



Para ello ve a Diseño-> Edición de HTML-> y Expandimos Artilugios. Ahora busca la etiqueta </head> y añade antes las líneas de CSS:
<style type="text/css">#bljaIMGte{float:left;position:relative;}#bljaIMGte .bljaIMGtex {width:320px;position:absolute;top:10px;left:14px;}</style>
Guardar Plantilla.

Ahora el código necesario que hará funcionar el truco. Puedes utilizarlo tanto en una entrada como en un gadget.
<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, ó bastará con eliminar dichas etiquetas y añadir al final la etiqueta </br>. "También puedes deshacerte de todo esto y escribir seguido".
En color:#000000; puedes personalizar el color (#000000) del texto, usando una tabla de colores..

Vía:  elbalcondejaime.blogspot.com

5 comentarios:

Hola, Te he descubierto hace poco... ¿Como? Sacando el "html" de una página, donde aparecía el artilugio para hacer el scroll de imágenes. Ese de 125 x 125. Me ha resultado sumamente útil, para ahorrar espacios de banner y te quería dar las gracias por sacarme la ignorancia en tantas cosas. Por ejemplo, lo que comentás en este post es muy bueno, porque no tenía idea que el Css es más liviano que el html. Aún no se bien como va la cosa, porque entro de a ratos a mirar y aprender. Gracias otra vez y un saludo cordial.

Muchas gracias por tu aporte, me sirvió bastante y muy rápido.

Lo apliqué en esta pagina web, con unas fotografías de catalogo http://www.joyeriaymodafemenina.com/?page_id=19

Publicar un comentario en la entrada