Foros del Web » Creando para Internet » CSS »

Imagen sobre imagen css

Estas en el tema de Imagen sobre imagen css en el foro de CSS en Foros del Web. Saludos; No puedo solucionar lo siguiente. Colocar una imagen sobre otra mediante css. esto es lo que quiero: Que es esta imagen: Sobre esta: que ...
  #1 (permalink)  
Antiguo 16/09/2011, 21:59
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 12 años, 7 meses
Puntos: 7
Imagen sobre imagen css

Saludos;

No puedo solucionar lo siguiente. Colocar una imagen sobre otra mediante css.

esto es lo que quiero:



Que es esta imagen:



Sobre esta: que es el {thumbnail}



Codigo html:

Código:
<div>{thumbnail}</div><div class="thum"></div>
<div class="texto-thum">{image_name}</div>
Codigo css:

Código:
.thum2 {
background-image:	url( "http://www.juegga.com/i/fondo-thums.png" );
height:	127px;
width:	152px;
background-repeat:	no-repeat;
position:absolute;
margin:	0;
padding:	0;
}

.texto-thum {
color:	#FF0000;
font-weight:	bold;
}
__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 16/09/2011, 22:26
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 13 años, 3 meses
Puntos: 306
Respuesta: Imagen sobre imagen css

Y donde aplicas la clase thum2 ?
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 16/09/2011, 22:56
 
Fecha de Ingreso: septiembre-2011
Mensajes: 158
Antigüedad: 10 años, 8 meses
Puntos: 15
Respuesta: Imagen sobre imagen css

cuando escribas background-image:url(la_imagen.jpg); no se escribe comillas, eso puede causar errores ala ora de validar tu codigo

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titulo</title>
<style type="text/css">
#caca{
background-image:url(http://www.juegga.com/i/fondo-thums.png);
background-repeat:no-repeat;
height:	127px;
width:	152px;
padding:6px 5px 5px 6px;
}
</style>

</head>
<body>

<div id="caca">
<img src="http://www.juegga.com/imagen-inferior.png">
</div>
</body>
</html>
  #4 (permalink)  
Antiguo 16/09/2011, 23:11
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 13 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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin título</title>
  5. <!--
  6. *{  margin:0;
  7.     padding:0;
  8.     }
  9. #cuadro{
  10.     width:152px;
  11.     height:127px;
  12.     position:relative;
  13.     overflow:hidden;
  14.     margin:auto;
  15.     }
  16. #marco{
  17.     position:relative;
  18.     width:152px;
  19.     height:127px;
  20.     background-image: url(images/imagen-superior.png);
  21.     background-repeat: no-repeat;
  22.     background-position: center center;
  23.     z-index:55;
  24.     }
  25. #foto{
  26.     z-index:1;
  27.     position:absolute;
  28.     width:152px;
  29.     height:127px;
  30.     left:0px;
  31.     top:0px;
  32.     }
  33. #foto img{
  34.     width:140px;
  35.     height:120px;
  36.     margin-left:6px;
  37.     margin-top:3px;
  38.     }  
  39. -->
  40. </head>
  41.  
  42.  
  43. <div id="cuadro">
  44.     <div id="marco"></div>
  45.     <div id="foto">
  46.         <img src="images/imagen-inferior.png"  />
  47.     </div> 
  48.  </div>
  49.  
  50.  
  51. </body>
  52. </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--
  #5 (permalink)  
Antiguo 17/09/2011, 08:30
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 12 años, 7 meses
Puntos: 7
Respuesta: Imagen sobre imagen css

dleal100 y C2am muchisimas gracias por sus respuestas!!

C2am hiciste justo lo que queria, funciona perfecto mil gracias. Estaba volviendome loco esto jaja.

Saludos y nuevamente muchas gracias!!!!
__________________
Fondos de pantalla
Juegos Gratis

Etiquetas: fondo, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:30.