Inicio Condiciones de Uso Mapa del sitio ▼ Ayuda Blogger Afiliación ¡Enlázame! Vótanos en... ▼ Contáctame Acerca de...

martes, 16 de agosto de 2011

Como superponer texto a una imagen

Queda ya muy claro con el título, y espero que quedé más claro aún con la explicación, hoy un vamos a aprender como superponer un texto sobre una imagen, primero os doy el código, y luego explico como modificarlo.



Hola, soy un texto de
color azul, sobrepuesto sobre esta imagen con forma de papel.

El código:

<div style="height: 186px; position: relative; text-align: center; width: 187px;">
<img border="0" src="URL DE LA IMAGEN" height="186" width="187" />
<span style="position: absolute; color: red; left: 7px; top: 5px;">TU TEXTO</span></div>

Comienza la explicación:

Cambiamos la parte en verde [186(x2) y 187(x2)], por la altura y el ancho, respectivamente, en píxeles, de nuestra imagen.

Las partes en rojo (URL DE LA IMAGEN y TU TEXTO), por exactamente eso, la URL de la imagen, y el texto que deseas superponer, si queremos producir un salto de línea entre dos palabras, añadimos entre ambas la etiqueta <br>.

Por último, hay tres partes en color magenta (red, 7 y 5), que hacen referencia al color del texto, a la distancia del borde izquierdo y a la distancia del borde superior, respectivamente, la primera la podemos cambiar por cualquier color especificando su nombre en inglés, y las otras dos, determinan margenes mediante píxeles.

Explico como funciona todo, mediante la etiqueta <div> y </div> creo una zona de las mismas medidas que la imagen, por eso se necesitan ponerlas dos veces, luego dentro de ese div, introduzco el código de la imagen con las mismas medidas, para que se adapte al borde del div y el texto no se salga. Finalmente utilizo la etiqueta <span> y </span> para situar el texto en el lugar que quiero, modificando la distancia en píxeles de los margenes superior e izquierdo.

Si te funciono el truco o te gusta el post, un comentario se agradece.

7 comentarios:

  1. ¡Qué explicación! Mira si fueras maestro!
    Está clarísimo, y gracias por responder a todas mis preguntas.
    (ya vendrán otras,jajaja)
    Un abrazo,Elsa

    ResponderEliminar
  2. Te copio la entrada y la llevo a mi blog de pruebas, para hacer el intento.Luego te cuento cómo salió.
    Elsa

    ResponderEliminar
  3. Yo profe? Que va... si entonces estaría todo el rato de parranda con los alumnos y no daría clase
    3:
    Jajajaja, espero noticias tuyas :)

    ResponderEliminar
  4. Joe, como te nía de olvidados estos conceptos de HTML. Saludos

    ResponderEliminar
  5. Jajjaja no hace falta más que mirarlo por encima y te acueras enseguida :)

    ResponderEliminar
  6. ¡De vuelta otros diitas! Bueno pues bastante util informacion aunque la pusiste demasiado tarde, ciudad blogger se te adelanto :D jeje igualmente buen post, y me encanta el diseño, ¡saludos!

    ResponderEliminar
  7. Jajaja ni sbaia que potro tuviera un post sobre de eso :)
    Muchas gracias Emilio 8)

    ResponderEliminar

Puedes comentar todo tipo de cosas, absteniéndote de:
- Realizar SPAM.
- Escribir insultos faltando al respeto de los demás usuarios.
Recuerda que en este blog, la moderación de comentarios está activada, así que piénsalo bien antes de enviar tu comentario si tiene algo "prohibido".