Superponer 2 imagenes

MaTyS · #1 (**permalink**) 23/01/2009, 16:56

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 :).

Aresillo · #2 (**permalink**) 23/01/2009, 17:47

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

MaTyS · #3 (**permalink**) 23/01/2009, 19:09

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 :).

Aresillo · #4 (**permalink**) 24/01/2009, 03:14

A qué te refieres con un más?

Ares

Rafael · #5 (**permalink**) 24/01/2009, 03:19

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.

Rafael · #6 (**permalink**) 24/01/2009, 03:23

Experimenta con esto:

Cita:

<div style="position: absolute; top: 10px; left: 10px;">Hola</div>
<div style="position: absolute; top: 12px; left: 12px;">Adios</div>

Dalvenjha · #7 (**permalink**) 24/01/2009, 08:17

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!!

Mikmoro · #8 (**permalink**) 24/01/2009, 08:52

Cita:

Iniciado por MaTyS

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>

Aresillo · #9 (**permalink**) 24/01/2009, 10:35

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

Ares

Dalvenjha · #10 (**permalink**) 24/01/2009, 10:39

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

Mikmoro · #11 (**permalink**) 24/01/2009, 10:46

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.

Aresillo · #12 (**permalink**) 24/01/2009, 11:08

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

Charlii · #13 (**permalink**) 24/01/2009, 11:16

hay una función de javascript que hace que los PNG se vean transparentes en IE6

Mikmoro · #14 (**permalink**) 24/01/2009, 11:26

Sí, varios, pero intentamos en general huir de ellos o evitarlos en lo posible; hay gente que navega sin javascript.

kseso? · #15 (**permalink**) 25/01/2009, 15:00

Otra solución puede ser crear un mapa de imagen

pato12 · #16 (**permalink**) 09/02/2009, 14:13

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