Html Immagine su immagine

Qualcuno può dirmi come posso aggiungere un'immagine su un'altra immagine senza usare Z-index o Z-order?Html Immagine su immagine

fonte

2009-07-02 Adrian Pirvulescu

Difficile rispondere correttamente senza sapere esattamente cosa si vuole ottenere, z-index probabilmente non è quello che realmente serve. Ad esempio, la seguente dovrebbe funzionare:

<div id="container"> 
    <img src="img1.jpg" id="img1" /> 
    <img src="img2.jpg" id="img2" /> 
</div> 

#container { 
    position:relative; 
} 

#img2 { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
}

anche se si utilizza <img> tag o background-images dipende dal valueOf semantica delle immagini, vale a dire sei essi contenuti di presentazione o actualy della pagina?

fonte

2009-07-02 15:09:03 roryf

Mi piacciono tutte le risposte ... ma ho accettato questo perché ha il css esatto che volevo :). Grazie a tutti voi !!!!!!!!!!!!!!!!! –

Grazie bella risposta – kobe

L'HTML non è valido senza gli attributi 'alt' sulle immagini. – tomasz86

Imposta immagine di sfondo dell'immagine principale CSS con la background-image proprietà

fonte

2009-07-02 15:05:49 Colin

Questo probabilmente sarebbe il modo più veloce, ma è anche possibile posizionare una delle immagini assolutamente sopra l'altra. – Dan

@Dan: sì, se si utilizza la posizione di sfondo, anche se l'immagine sovrapposta deve disporre di sufficiente spazio trasparente che la circonda affinché l'immagine di sottofondo sia visibile. – DisgruntledGoat

Il modo più semplice è quello di assicurarsi che siano entrambi della stessa dimensione, si ha la trasparenza, e si utilizza questo frammento:

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />

fonte

2009-07-02 15:07:07 Weegee

overlay_image deve essere nell'attributo src, non nella regola dello sfondo. Non sorprende che la regola di base determinerà lo sfondo ... – DisgruntledGoat

Ah, buona presa, non pensavo quando l'ho scritto. Modificato. – Weegee

Ma entrambi avranno le stesse dimensioni ??? –

È possibile anche utilizzare il testo sopra l'immagine utilizzando il seguente codice:

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0"> 
    <TR> 
    <TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom"> 
     <FONT SIZE="+1" COLOR="yellow">Sample Text</FONT> 
    </TD 
    </TR> 
</TABLE>

Speranza che aiuta.

fonte

2011-11-17 19:05:19 sara

Codice molto "vecchia scuola". Non usare questo (ad eccezione di e-mail HTML). – tomasz86

risposta

Problemi correlati