relojes blogs

12.4.12

Poner texto sobre una imagen usando CSS


Comparte esta historia en:
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.


PRIMER PARRAFO
SEGUNDO PARRAFO
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, o 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.

enlace

5 Comentarios :

Material de Oficina on line dijo...

Muy util. LO pondremos en practica para todas las fotografias de nuestros almaceneces de productos de oficina que, por cierto, so la pera :-)

Antonio dijo...

Me alegra que le sea de utilidad.

Saludos Material de oficina on line

Anónimo dijo...

Pero si coloco este codigo ya no puedo centrar la imagen. :(

Localiza Recursos Sociales dijo...
Este comentario ha sido eliminado por el autor.
Localiza Recursos Sociales dijo...

Queda genial.Muchas gracias

¿Quieres comentar algo?




Estado del blog

entradas
comentarios
1.467 followers
168 seguidores
 días online



Comentarios recientes

 
© Copyright 2009 - 2015 | Contacto | Seguir este blog | Sobre mi | Facebook | Twitter | LinkedIn | Mapa del sitio | Tienda | Conversor | RSS |

@duque71 2015