Tema: Imagen sobre imagen css
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 16/09/2011, 23:11
Avatar de C2am
C2am
 
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Imagen sobre imagen css
Aquí mi solución:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin título</title>
  6. <style>
  7. <!-- 
  8. *{  margin:0;
  9.     padding:0;
  10.     }
  11. #cuadro{
  12.     width:152px;
  13.     height:127px;
  14.     position:relative;
  15.     overflow:hidden;
  16.     margin:auto;
  17.     }
  18. #marco{
  19.     position:relative;
  20.     width:152px;
  21.     height:127px;
  22.     background-image: url(images/imagen-superior.png);
  23.     background-repeat: no-repeat;
  24.     background-position: center center;
  25.     z-index:55;
  26.     }
  27. #foto{
  28.     z-index:1;
  29.     position:absolute;
  30.     width:152px;
  31.     height:127px;
  32.     left:0px;
  33.     top:0px;
  34.     }
  35. #foto img{
  36.     width:140px;
  37.     height:120px;
  38.     margin-left:6px;
  39.     margin-top:3px;
  40.     }   
  41. -->
  42. </style>
  43. </head>
  44.  
  45. <body>
  46.  
  47. <div id="cuadro">
  48.     <div id="marco"></div>
  49.     <div id="foto">
  50.         <img src="images/imagen-inferior.png"  />
  51.     </div>  
  52.  </div>
  53.  
  54.  
  55. </body>
  56. </html>

Con esta solución, el borde redondeado interno del marco amarillo queda sobre la imagen.
Se podría eliminar el div "foto" y aplicar los estilos directamente a la imagen, pero creo que para mayor claridad es mejor de esta forma.

Saudos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--