¿Cómo superponer imágenes en javascript?

Question

Necesito resolver el siguiente problema.

Tengo dos (o más) imágenes .PNG de las mismas dimensiones. Cada imagen PNG se crea con un color de fondo transparente.

Necesito mostrar img1 y sobre él img2, por lo que en lugares donde img2 tiene un color trancparent, se verá img1.

Por ejemplo: img1 parte superior rellena de color transparente y una vaca en la parte inferior. img2 parte superior contiene nubes y parte inferior llena de color transparente.

Quiero combinar estas dos imágenes y ver las nubes sobre la vaca.

Entiendo que necesito usar algún filtro cuando visualice ambas imágenes, pero no estoy seguro de cuál y qué parámetros usar.

Answer 1

No necesita utilizar ningún tipo de filtro (except in IE6).

Puede simplemente colocar elementos <img> uno encima del otro, usando CSS position: absolute para hacer que ambos elementos ocupen la misma área.

In IE6, you'll need an AlphaImageLoader filter simply to display the PNGs with transparency

Answer 2

Puede probar configurando sus .style.position a "absoluta", les dan las mismas coordenadas con la izquierda y arriba (o hacia la derecha o inferior), y luego cambiar su índice z. Aunque es bastante sucio, y tal vez no funciona bien con tu página, pero no puedo pensar en otra solución.

Answer 3

Algo como esto debería funcionar (utilizando sólo HTML/CSS):

HTML:

<div class="imageWrapper"> 
    <img class="overlayImage" src="cow.png"> 
    <img class="overlayImage" src="clouds.png"> 
    <img class="overlayImage" src="downpart.png"> 
</div> 

CSS:

.imageWrapper { 
    position: relative; 
} 
.overlayImage { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Tenga en cuenta que IE6 no lo hace manejar la transparencia en PNG muy bien. Si necesita que funcione en IE6, deberá aplicar los filtros que mencionó. Este procedimiento es detailed here.

Answer 4

Si está utilizando jQuery probar esto en cualquier navegador

<script> 
$(function() { 
    var position = $("#i1").offset(); 
    $('#i2').css({ position:'absolute', top:position.top, left: position.left}); 
}); 
</script> 
<img id='i1' src='images/zap_ring.png' /> 
<img id='i2' src='images/zap_ring_hover.png' /> 

y ajustar top & left valores

$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});