Come posso sovrapporre immagini (png) all'interno di un sito web?

Question

Sto provando a montare un'immagine nel mezzo di un'altra immagine (leggermente più grande) in modo che appaia all'interno dell'immagine più grande (un telefono in questo caso). Non sono sicuro del modo corretto per farlo accadere e qualsiasi aiuto è molto apprezzato!

Answer 1

È necessario impostare la proprietà css z-index.

HTML:

<img id="png1" src="png1.png" /> 
<img id="png2" src="png2.png" /> 

CSS:

#png1 { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

#png2 { 
    position:absolute; 
    /* 
    set top and left here 
    */ 
    z-index:1; 
} 

Ecco una demo: http://jsfiddle.net/AlienWebguy/6VSBv/

Answer 2

<img style="position:absolute;left:10px;top:10px;" src="img1.png"> 
<img style="position:absolute;left:20px;top:20px;" src="img2.png"> 

Naturalmente, sarà necessario regolare le coordinate, e vi consiglio vivamente mettere il CSS in un foglio di stile anziché in linea. Ecco un buon tutorial sui CSS per ulteriori informazioni: http://www.csstutorial.net/

Answer 3

Quindi sei nuovo di html e CSS. Non è un problema, ma la tua domanda è un po 'vaga per SO's general format.

Tuttavia, in poche parole:

<style> 
    #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;} 
    #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;} 
</style> 
<div id="phone"> 
    <div id="display"> 
     Hello! What is up? Miley rocks! 
    </div> 
</div> 

esempio dal vivo: http://jsfiddle.net/cbn4L/

Questo, naturalmente, è un esempio estremamente semplice. E come puoi vedere il contenitore interno non è un'immagine, ma un testo .. Tecnicamente puoi aggiungere un'immagine lì ora .. ma mentre ti stiamo avvicinando al mondo dell'HTML & CSS, allora questo è un esempio migliore e forse può migliorare il tuo concetto :)