Come sovrapporre le immagini in javascript?

Question

Ho bisogno di risolvere il seguente problema.

Ho due (o più) immagini .PNG delle stesse dimensioni. Ogni immagine PNG viene creata con un colore di sfondo trasparente.

ho bisogno di visualizzare img1 e su di essa img2, quindi in luoghi dove img2 ha colore trancparent, img1 si vedrà.

Ad esempio: parte superiore img1 riempito con colore trasparente e una mucca in parte verso il basso. La parte superiore di img2 contiene nuvole e parti inferiori piene di colore trasparente.

Voglio combinare queste due immagini e vedere le nuvole sopra la mucca.

ho capito che ho bisogno di usare qualche filtro quando la visualizzazione di entrambe le immagini, ma non è sicuro che uno e quali parametri di esso da usare.

Answer 1

Non è necessario utilizzare alcun tipo di filtro (except in IE6).

È possibile posizionare semplicemente gli elementi <img> uno sopra l'altro, utilizzando i fogli di stile position: absolute per far sì che entrambi gli elementi occupino la stessa area.

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

Answer 2

Si può provare modificando la loro .style.position a "assoluto", dare loro le stesse coordinate con sinistra e in alto (o verso destra o inferiore) e quindi modificare il loro indice z. Anche se è abbastanza sporco, e forse non funziona bene con la tua pagina, ma non riesco a pensare ad un'altra soluzione.

Answer 3

Qualcosa del genere dovrebbe funzionare (utilizzando solo 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; 
} 

Tenete a mente che IE6 non lo fa gestire la trasparenza in PNG molto bene. Se hai bisogno che funzioni in IE6, dovrai applicare i filtri che hai menzionato. Questa procedura è detailed here.

Answer 4

Se si utilizza jQuery provare questo in qualsiasi browser

<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' /> 

e regolare top & left valori

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