Superponer una imagen sobre otra con CSS


El otro día me encontré con la necesidad de superponer una imagen sobre otra, mi aplicación debía mostrar una imagen y luego encima colocarle un marco quedando superpuesto.

Claro está que la imagen superpuesta como un marco debe ser trasparente en su interior para poder mostrar la imagen que va debajo.

Hay dos maneras de hacerlo, una poniendo el estilo en un archivo externo o incrustado en el <head> de la página web o sino agregándolo en el mismo DIV.

<div style="position:relative"><img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" /><div style="position:absolute; top:0; left:0;"><a href="http://www.guiaplaza.com"><img border="0"  src="marco_chistes.png" width="300" height="300" /></a></div></div>

Si desean la opción más Larga es la siguiente:


<html>
<head>
<title>Ejemplo de Superponer Imagenes</title>
</head>
<style type="text/css">
#chistes{
position: relative;
}
.sobre {
position:absolute;
top:0px;
left:0px;
border:none;
}
</style>

<body>

<div id="chistes">
<img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" />
    <a href="http://www.guiaplaza.com/chistes"><img class="sobre" src="marco_chistes.png" width="300" height="300" /></a>
</div>

</body>
</html>



Otros artículos del mismo tema que te pueden interesar:

» Protege tus fotos propias con imágenes sobrepuestas

20 comentarios:

  1. gracias es lo que necesitaba :)
    un saludo

    ResponderEliminar
  2. podrias poner el link para ver como quedo..:P

    ResponderEliminar
    Respuestas
    1. El link se encuentra justamente en otro artículo:
      http://webmasters.guiaplaza.com/2011/08/protege-tus-fotos-propias-con-imagenes.html

      Suerte

      Eliminar
  3. hola,mira tengo un retrato de winnie the pooh , lo que pasa que el interior del marco no es transparente entonces no puedo,puedes explicarme como puedo hacer?yo quiero poner la foto de mi bebe en el interior pero es que no puedo.muchas gracias espero alguna respuesta.victoria
    mavi18_59@hotmail.com

    ResponderEliminar
    Respuestas
    1. Lo que debes hacer es usar un programa Editor de fotos y pintar el interior del marco de un color fuerte y diferente y luego cuando vuelves a grabarlo le indicas que ese color lo haga transparente. Con eso ya tendrás tu marco con fondo transparente.

      Eliminar
  4. El ejemplo que desean esta en la página:
    http://blogs.deperu.com/blogueando

    miren al final, lado derecho, El chiste esta con un marco transparente.

    ResponderEliminar
  5. Hay otro ejemplo en este mismo blog, en el post que dice para ver fotos borradas del iphone y les ha quedado muy bien, aparentemente puedes ver la imagen de una cámara, pero si das clic vas a grabar una imagen transparente que es el truco para ver las miniaturas en el álbum de las fotos borradas.

    http://webmasters.guiaplaza.com/2011/07/descubre-fotos-borradas-en-el-iphone-de.html

    ResponderEliminar
  6. Gracias probé con la primera opcion y funcionó!!!!

    ResponderEliminar
  7. Jorge Nelson Torres26 de febrero de 2012, 2:07

    Muchas gracias por tu aporte, me parece excelente y es lo que estoy hace un buen tiempo buscando, lo que te quería pedir el favor es, qué variación hay que hacer, para que la persona pueda descargar a su PC la fotografía, pero que al descargarla lo pueda hacer con la imagen superpuesta, como una sola imágen, en este caso se puede descargar únicamente el marco, pero no la imagen de abajo por decirlo de alguna manera.

    ResponderEliminar
    Respuestas
    1. Hola, Jorge:

      No existe forma de combinar ambas imágenes en un script, lo más práctico sería que subas la foto ya editada con tu leyenda, de esa manera ya estaría protegida.

      Eliminar
    2. Jorge Nelson Torres2 de marzo de 2012, 14:12

      GPC Muchísimas gracias, es que en alguna oportunidad escuché que se podía hacer en PHP pero veo que estoy mal informado; nuevamente Muchas Gracias.

      Eliminar
  8. Hola Tengo un PRoblema Quiero poner mi Foto Sobre otra imagen La imagen tiene una frase y kiero qe se vea la frase pero con mi foto como lo hago

    ResponderEliminar
    Respuestas
    1. haz lo mismo de este artículo, en lugar del marco colocas tu frase con fondo transparente (en png o gif), eso lo puede crear con cualquier editor gráfico.

      Tu foto si puede estar en jpg.

      Eliminar
  9. amigo ayúdame por favor el scrip me salio como anillo al dedo pero es que al pareces en la plantilla de mi blog le crea automáticamente un recuadro con una linea a la fotos y entonces la foco que quedara encima sera mas pequeña por que quiero que se una especie de etiqueta entonces quedara dentro de la foto de fondo pero se me crea el recuadro que te digo y no se como quitarlo ayúdame mira mi blog http://utilidadvirtual-peliculas.blogspot.com/p/1.html

    ResponderEliminar
    Respuestas
    1. lo que pasa en tu caso es que las imagenes toman las reglas de css de tu plantilla, para evitar eso agrega en el archivo de estilos (css) una nueva regla solo para las imagenes que desees, todo es configurable desde ese nivel .... por cierto a las imagenes deberás ponerle el "class" con la nueva regla configurada.

      Eliminar
  10. Muchas gracias!!! esto me fue de mucha ayuda :)
    después de un rato de buscar, encontré aquí la solución!!!

    yo no se nada de esto, pero si quieren poner otra imagen extra, lo único que tienen que hacer, es repetir esta sección pero poner otro nombre, EJEMPLO

    .sobre(PONER OTRO NOMBRE) {
    position:absolute;
    top:0px;
    left:0px;
    border:none;
    }


    a href=" http://www.xxxXD.com">
    img class="sobre(PONER OTRO NOMBRE)" src="http://oi43.tinypic.com/55ibo0.jpg" /



    ResponderEliminar
  11. Saludos

    Necesito hacer esto de manera automática para mi blog, no puedo hacerlo una x una puesto que tengo más de 30 imágenes en el sitio, ¿me pueden ayudar?.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hazlo con php o editando la platilla

      Eliminar

Ultimos temas en Soluciones para Webmasters:

desde «Espacio Bing» (otro blog Recomendado)