Foros del Web » Creando para Internet » CSS »

Superponer 2 imagenes

Estas en el tema de Superponer 2 imagenes en el foro de CSS en Foros del Web. Hola, amigos de Foros del Web. Yo estoy tratando de hace un css, para superponer una imagen en otra. Miren les muestro un ejemplo visual ...
  #1 (permalink)  
Antiguo 23/01/2009, 16:56
Avatar de MaTyS  
Fecha de Ingreso: enero-2009
Ubicación: Mar del Plata
Mensajes: 220
Antigüedad: 8 años, 11 meses
Puntos: 18
Superponer 2 imagenes

Hola, amigos de Foros del Web.
Yo estoy tratando de hace un css, para superponer una imagen en otra.
Miren les muestro un ejemplo visual echo con photoshop :P, por que nose como hacerlo con CSS, pero supongo que se puede hacer.

Bueno primero tenemos esta imagen de harry potter.


Despues tenemos este logo de The News ( mi nueva web )


y lo que quiero hacer es que quede algo parecido a esto:


Como podran ver el logo The News se inserto arriba de la imagen de harry poter arriva a la izquierda.
Espero que alguien me pueda ayudar.
La imagen que dice the news esta ubicada en images/login.png.
Desde ya muchas gracias :).
  #2 (permalink)  
Antiguo 23/01/2009, 17:47
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Superponer 2 imagenes

Pues tienes que definir un div con el tamaño de la imagen de arriba, y ponerla de fondo...
después dentro de ese div metes otro para "The News" y lo posicionas...
Y listo.

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 23/01/2009, 19:09
Avatar de MaTyS  
Fecha de Ingreso: enero-2009
Ubicación: Mar del Plata
Mensajes: 220
Antigüedad: 8 años, 11 meses
Puntos: 18
Respuesta: Superponer 2 imagenes

Gracias, pero lo que yo quiero es hacer por ejemplo lo que hace youtube, que le agrega un + a la imagen preliminar.
Y si es posible quisiera el codigo CSS.
Desde ya gracias por tu atencion :).
  #4 (permalink)  
Antiguo 24/01/2009, 03:14
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Superponer 2 imagenes

A qué te refieres con un más?

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #5 (permalink)  
Antiguo 24/01/2009, 03:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Superponer 2 imagenes

Hum. Ok si se puede poner una cosa sobre otra, ya sea texto u otra imagen. Pero para poner una imagen sobre otra como lo quieres, la imagen de arriba tiene que tener canal alpha o máscara, lo que implica que lo haces en un programa de retoque para preparar la máscara, lo que implica que mejor lo combinas en ese programa, no con css.
  #6 (permalink)  
Antiguo 24/01/2009, 03:23
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Superponer 2 imagenes

Experimenta con esto:

Cita:
<div style="position: absolute; top: 10px; left: 10px;">Hola</div>
<div style="position: absolute; top: 12px; left: 12px;">Adios</div>
  #7 (permalink)  
Antiguo 24/01/2009, 08:17
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Superponer 2 imagenes

Si tienes una imagen PNG con fondo transparente simplemente, dale position absolute a tu imagen y jugando con left y top la ubicas donde quieres y fin del problema.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #8 (permalink)  
Antiguo 24/01/2009, 08:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Superponer 2 imagenes

Cita:
Iniciado por MaTyS Ver Mensaje
Gracias, pero lo que yo quiero es hacer por ejemplo lo que hace youtube, que le agrega un + a la imagen preliminar.
Y si es posible quisiera el codigo CSS.
Pues la solución más fácil es la que te dice Aresillo, aunque como haces uso de un png transparente, te causará problemas con un navegador.

Yo tampoco entiendo lo del más.

Y con la frase que resalto, hay que poner más cuidadito con la forma en que se piden las cosas:

Ejemplo

Código:
Cita:
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title></title>
<style type="text/css">
* {margin:0; padding:0;}
#contenedor {width: 400px;
height: 320px;
background: url(img/harry-potter.jpg);
}
</style>
</head>
<body>
<div id="contenedor">
<h1><img src="img/thenewsxi0.png" /></h1>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 24/01/2009, 10:35
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Superponer 2 imagenes

Ya que estamos... pregunto... porqué no hacer la transparencia con gif??
(Ya sé que es pregunta de novato...)

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #10 (permalink)  
Antiguo 24/01/2009, 10:39
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Superponer 2 imagenes

Porque las magenes en gif transparente no ayudan demasiado, su borde dentado no es muy estético.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #11 (permalink)  
Antiguo 24/01/2009, 10:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Superponer 2 imagenes

Sí, en general por calidad. Hay casos en los que puede quedar muy bien, pero pocos

Lo cierto es que en este caso yo integraría el segundo gráfico dentro del primero y haría uno sólo, la verdad, para no complicarle con png's. NO le veo mucha utilidad.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 24/01/2009, 11:08
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Superponer 2 imagenes

sólo era por preguntar... y como en las competencias estamos pillados por los pngs y el IE6... pues me tengo que apañar con los gifs...

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #13 (permalink)  
Antiguo 24/01/2009, 11:16
 
Fecha de Ingreso: junio-2008
Mensajes: 131
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Superponer 2 imagenes

hay una función de javascript que hace que los PNG se vean transparentes en IE6
  #14 (permalink)  
Antiguo 24/01/2009, 11:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Superponer 2 imagenes

Sí, varios, pero intentamos en general huir de ellos o evitarlos en lo posible; hay gente que navega sin javascript.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 25/01/2009, 15:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Superponer 2 imagenes

Otra solución puede ser crear un mapa de imagen
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 09/02/2009, 14:13
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 10 años, 2 meses
Puntos: 101
Respuesta: Superponer 2 imagenes

Hola,
Ya entendi lo que quiere MaTyS.
Ejemplo:
En youtube.com, en las imagenes de los videos hay un + y muestra la duracion. Eso es un div.

Y lo que quieres es superponer el div en la imagen sin estar posisionando(top, left). Youtube.com los superpone:

Suerte
Salu2
PD: Perdon por revivir el tema, pero necesito yo también esto
__________________
Half Music - www.halfmusic.com
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




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