JMiur [E]

Hay muchas formas de superponer un texto a una imagen. La más común es colocar la imagen como fondo de un bloque DIV. Si lo escribimos "normalmente", veríamos algo así:

Primera línea del texto
segunda línea del texto


<div style="background: transparent url(URL_imagen) no-repeat left top; height: 293px; margin: 0 auto; width: 400px;" />
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>

Lógicamente, el texto estará arriba. Si quisieramos ubicarlo abajo o en un lugar específico, deberíamos agregarle al DIV la propiedad position: relative y al contenido la propiedad position: absolute. De este modo, utilizando left, right, top y bottom podremos ubicar ese texto en cualquier lugar dentro de la imagen:

Primera línea del texto
segunda línea del texto


<div style="position: relative;background: transparent url(URL_imagen) no-repeat left top; margin: 0 auto; height: 293px; width: 400px;" />
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>

Lo mismo puede hacerse utilizando la imagen en una etiqueta IMG lo que además, permite que esta sea un enlace:

Primera línea del texto
segunda línea del texto


<div style="position: relative; margin: 0 auto;width: 400px;">
<a href="una_URL"><img src="URL_imagen" /></a>
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>

24 comentarios:

alezandri  

Seguí este artículo a un archivo en PDF, el código HTML, ya que contiene muy interesante, y es raro de usar, pero es muy útil :)

Great job!

Responder
Jorge Key/Raws  

Hola Soy Jorge Key

En uno de Mis Blogs "Onlinestrenos" Incorpore Intro Flash Por Medio de un Frame Javascrip lo cual ise Posible con Ayuda de GemaBlog,El Escaparate de Rosa y Vagabundia...

Este Intro Flash en Blogger es Posible con solo este Archivo Js solo Modificando "splashpageurl" la Url de la Entrada o Pagina Html que Uctilizaras como Intro De tu Blog Añadiendolo en un Elemento Html Independiente Añadiendo una Etiqueta b:if cond='data:blog.homepageUrl == data:blog.url


Espero y Me Ayudes a Publicar una Tutorial... Para Darlo a Conocer alos Bloggeros

Responder
Moises Vivas  

Excelente, exactamente hoy me estaba preguntando como se hacia eso. de 10 este post y la explicación, como todos tus post =)

Saludos

Responder
Sonieta ladeloslibros  

Muy interesante . Una pregunta el fondo azul y la letra blanca no son faciles de leer ? se puede poner otro fondo para que se lea mejor? O dejar el fondo de la foto y cambiar el coolor del texto. Pienso en utilizar esto como pie de foto o copy de foto se puede?
Saludos

Responder
Graciela  

¡guay chuli! si que lo haces fácil, muy bueno Jmiur. Probaremos :P

No contesto como cambiar el color de fondo, de las letras, el tamaño, lo dejo para usted conteste :X

Responder
Dña. Urraca  

Es buena idea, no la usare de momento, pero es buena. Pero siempre me haces pensar en las cosas mas raras, con lo cual, a ratos, me cuesta concentrarme. Leía tus explicaciones sobre el texto y no dejaba de pensar en el tamaño que tiene que tener un animal para poner un huevo de jirafa, capitán, definitivamente debo de tener la mente enferma.

Responder
Javi Melaza  

Esto es muy bueno para poder poner Copyright en las fotos. Gracias JMiur.

Saludos.

Responder
JMiur  

alezandri:
Parece un poco extraño pero, si lo pruebas, verás que es simple de usar y muy flexible, puede hacerse cualquier cosa. Es una técnic interesante.

Jorge Key:
Miraré el script a ver qué hace pero no comprendo cuál es tu idea.

Moises Vivas:
Me alegro que te resulte útil, inténtalo, es realmente sencillo.

Sonieta ladeloslibros:
Sí, puedes cambiar cualquier cosa, colores, fondos y sobre todo, la opacidad que es lo que puede hacer que algo sea más o menos legible. Si te fijas, todas esas propiedades las defines en el style de H4. Allí, puedes cambiar cualquier cosa excepto la parte de position que es lo que hace que se superpongan.

Graciela:
Pruebe :D

Dña. Urraca:
Perdón ... su pregunta me obligó a pedir una consulta de urgencia con el psiquiatra. Si no regreso, bueno, espero que las enfermeras del hospicio me traten con dulzura .... ¿quél tamaño debe tener un animal para poner un huevo de jirafa? Demonios, ni me imagino el tamaño de la sartén que se necesitaría para freirlo pero, ¡vaya! ¡que buena tortilla se haría!!!!!!!!!!!

Javi Melaza:
Así es. Es uno de los usos más comunes que se le da a esta técnica.

Responder
Jorge Key/Raws  

Bueno yo solo Kiero Compartir con los Bloggeros Intro Flash en su Blog
Solo Descarga el SCRIPT Y vERAS YA LO ADAPTE A BLOGGER QUITANDO ALGUNAS ETIQUETAS JAVA

Responder
Dña. Urraca  

Pido no pelar las patatas para la tortilla.

Responder
Jorge Key/Raws  

Sigue Este Mini Tuto Para Incorporar un Intro (Flash o Html)
en un Blogger Por Frame Javascrip lo cual Ise Posible con Ayuda de:

GemaBlog,El Escaparate de Rosa y Vagabundia...

Mira el Ejemplo de Mi Intro Flash en Uno de Mis Blogs

Responder
Gem@  

Vi esta entrada de resfilón y por fin pude verla tranquila.
Me gusta como queda este efecto, yo lo hice hace poquito pero ni punto de comparación, no tenía fondo :S
(El tema inexplicable sigue sin resolverse, es de locos)

Responder
Gem@  

Estoy soñando o e avatar de los comentarios ha regresado a mi blog!!

Responder
JMiur  

EPPPPPPPPPPPPA!!!!!!!!!!! Aquié parece haber vuelto :D

.... disculpe la demora ...

Efectivamente, también aha vuelto a tu blog ¡MILAGRO!!!

Responder
Gem@  

Que alegría ya tenemos caritas otras vez !!
Crucemos los dedos y seamos positivos para que dure el arreglo :D

Responder
JMiur  

CRUCEMOS LOS DEDOS ... o hagamos un concurso a ver quién acierta la fecha en que dejarán de funcionar otra vez :D

Responder
La hormiguita  

Muy bueno esto!!! Estoy retrasada ... con la lectura de su blog, pero yo ando hoy por acá, descubriendo post...jajajaja
Gracias

Responder
JMiur  

Epa, parece que anda por todos lados :D

Responder
La hormiguita  

Y soy Hormiga...... :)

Responder
JMiur  

:D :D :D

Responder
viamontefc  

como hago para que la primera linea de texto sea mas grande el tamaño de la fuente que la segunda linea de texto ? ?
gracias muy bueno !!!

Responder
JMiur  

Estableciendo las propiedades de cada una. Por ejemplo:

Primera línea del texto<br /><span style="font-size:30px;"&ft;segunda línea del texto</span>

Responder
marco  

Excelente blog, muy agradecido con sus aportes.

Responder
Crubiera  

Me vino perfecto.
Muy sencillo y con cero complicaciones.
Muchas gracias JMiur, me lo quedo. :)

¡Saludos!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR