Comment puis-je obtenir des images en ligne qui se chevauchent en CSS sans compter sur un positionnement négatif ou un z-index, en particulier lorsqu'il s'agit de nombres d'images dynamiques ?

Images en ligne qui se chevauchent : une solution CSS

Obtenir des images en ligne qui se chevauchent peut être un défi, mais c'est possible avec une manipulation CSS minutieuse. Dans cet article, nous explorerons une solution qui utilise flexbox et l'ordre inverse pour créer un effet similaire à l'image fournie.

Le problème

Le code d'origine utilise positionnement négatif et z-index pour chevaucher les images, mais ces méthodes ont des limites en ce qui concerne le nombre d'images dynamiques. D'autres options, telles que la combinaison d'images en externe ou l'utilisation d'un conteneur de largeur définie, introduisent leurs propres inconvénients.

La solution

Pour éviter ces difficultés, vous pouvez tirer parti de flexbox et inverser l’ordre des images. Le code CSS suivant illustre cette approche :

<code class="css">.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar {
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:last-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
}</code>

Explication

• Flex Direction : Nous définissons la direction flexible sur row -reverse pour inverser l'ordre des images, la dernière image apparaissant à l'extrême gauche.
• Marge négative : Pour créer un effet de chevauchement, nous appliquons une marge négative à toutes les images sauf le dernier. Le montant de la marge est réglable en fonction du chevauchement souhaité.
• Bordure : Une bordure unie blanche est ajoutée autour de chaque image pour les séparer visuellement.

Structure HTML

Avec les styles CSS fournis, ajustez votre HTML comme suit :

<code class="html"><div class="avatars">
  <span class="avatar">
    <img src="image1.jpg">
  </span>
  <span class="avatar">
    <img src="image2.jpg">
  </span>
  <span class="avatar">
    <img src="image3.jpg">
  </span>
</div></code>

Ce code produira une rangée d'images en ligne qui se chevauchent sans nécessiter de calculs complexes ou manipulation d'images externes. L'effet est entièrement dynamique et s'adapte à n'importe quel nombre d'images.

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!