Html Image over image

Question

Quelqu'un peut-il me dire comment puis-je ajouter une image sur une autre image sans utiliser Z-index ou Z-order?

Answer 1

Difficile de répondre correctement sans savoir exactement ce que vous voulez réaliser, l'index z n'est probablement pas ce dont vous avez réellement besoin. Par exemple, le suivant travaillerait:

<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; 
} 

également si vous utilisez <img> balises ou background-images dépend du valueOf sémantique des images, à savoir sont-ils contenu ou de présentation de la page actualy?

Answer 2

Régler la principale image d'arrière-plan de l'image en CSS avec le background-image propriété

Answer 3

Le plus simple est de vous assurer qu'ils sont tous les deux de la même taille, on a la transparence, et que vous utilisez cet extrait:

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

Answer 4

Vous pouvez également utiliser du texte sur l'image en utilisant le code suivant:

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

espoir qui aide.