Comment puis-je superposer des images en HTML sans utiliser la composition ?

Positionnement d'images superposées en HTML sans composition

Vous souhaitez afficher plusieurs images sur une page Web, certaines étant positionnées au-dessus de d'autres, sans recourir au compositing pour des raisons de performances. Plongeons dans la solution :

Pour obtenir un chevauchement d'images, vous pouvez utiliser des techniques de positionnement HTML et CSS. Enveloppez les images dans un conteneur parent et appliquez-lui un positionnement relatif. Les images individuelles doivent avoir un positionnement absolu.

Voici un exemple d'extrait de code :

<div class="parent">
  <img  class="image1 lazy" src="/static/imghwm/default1.png" data-src="blue-square.png" alt="Comment puis-je superposer des images en HTML sans utiliser la composition ?" >
  <img  class="image2 lazy" src="/static/imghwm/default1.png" data-src="red-square.png" alt="Comment puis-je superposer des images en HTML sans utiliser la composition ?" >
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}

.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

Dans cet exemple, le conteneur parent a un positionnement relatif, permettant aux images enfants d'être positionnées par rapport à cela. L'image1 a un positionnement relatif et reste dans sa position initiale. L'image2 a un positionnement absolu et est décalée de 30 px par rapport aux bords supérieur et gauche du conteneur parent.

En utilisant cette approche, vous pouvez positionner les images avec précision sans les frais généraux de composition. Ceci est particulièrement avantageux pour les scénarios dans lesquels vous devez afficher plusieurs images de manière dynamique ou avoir des exigences de positionnement complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!