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>
23 comentarios:
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!
Excelente, exactamente hoy me estaba preguntando como se hacia eso. de 10 este post y la explicación, como todos tus post =)
Saludos
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
¡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
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.
Esto es muy bueno para poder poner Copyright en las fotos. Gracias JMiur.
Saludos.
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.
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
Pido no pelar las patatas para la tortilla.
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
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)
Estoy soñando o e avatar de los comentarios ha regresado a mi blog!!
EPPPPPPPPPPPPA!!!!!!!!!!! Aquié parece haber vuelto :D
.... disculpe la demora ...
Efectivamente, también aha vuelto a tu blog ¡MILAGRO!!!
Que alegría ya tenemos caritas otras vez !!
Crucemos los dedos y seamos positivos para que dure el arreglo :D
CRUCEMOS LOS DEDOS ... o hagamos un concurso a ver quién acierta la fecha en que dejarán de funcionar otra vez :D
Muy bueno esto!!! Estoy retrasada ... con la lectura de su blog, pero yo ando hoy por acá, descubriendo post...jajajaja
Gracias
Epa, parece que anda por todos lados :D
Y soy Hormiga...... :)
:D :D :D
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 !!!
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>
Excelente blog, muy agradecido con sus aportes.
Me vino perfecto.
Muy sencillo y con cero complicaciones.
Muchas gracias JMiur, me lo quedo. :)
¡Saludos!
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...