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 :-)

duque71 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. :(

Berta Fernández-Viña Fernández dijo...
Este comentario ha sido eliminado por el autor.
Berta Fernández-Viña Fernández 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 - 2018 | Contacto | Seguir este blog | Sobre mi | Facebook | Twitter | LinkedIn | Mapa del sitio | Tienda | Conversor | RSS |

@duque71 2018