web-dev-qa-db-fra.com

Html Image sur image

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

htmlcssimage
14
Adrian Pirvulescu

Difficile de répondre correctement sans savoir exactement ce que vous voulez réaliser, z-index n'est probablement pas ce dont vous avez réellement besoin. Par exemple, ce qui suit fonctionnerait:

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

De plus, que vous utilisiez les balises <img> ou background-images dépend de la valeur sémantique des images, c’est-à-dire du contenu présentatif ou actuel de la page?

29
roryf

Le moyen le plus simple est de vous assurer qu'ils ont tous les deux la même taille, l'un d'eux est transparent et vous utilisez cet extrait:

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

Définissez l'image d'arrière-plan de l'image principale en CSS avec la propriété background-image

5
Colin

Vous pouvez également utiliser du texte sur l'image à l'aide du 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>

J'espère que cela pourra aider.

0
sara