Comment puis-je créer des images en ligne qui se chevauchent à l'aide de Flexbox ?

Superposition efficace d'images en ligne à l'aide de Flexbox

Dans le but de créer un affichage visuellement captivant d'images en ligne superposées, une combinaison de CSS et HTML peut être utilisé pour obtenir l'effet souhaité.

Style CSS

Pour des résultats optimaux, appliquez des styles à un div englobant qui contient les images d'avatar. À l'aide de flexbox, définissez la propriété d'affichage sur inline-flex et configurez la direction de flexion pour inverser les lignes, alignant ainsi les images de droite à gauche.

De plus, définissez des conteneurs d'avatar individuels avec un positionnement relatif et attribuez-leur un largeur cohérente et bordure circulaire en utilisant le rayon de bordure. Pour éviter que les images ne sortent de leurs conteneurs, définissez le débordement sur caché.

Pour améliorer l'effet de chevauchement, ajustez la marge de chaque avatar, à l'exclusion du dernier, sur une valeur négative.

Dans chaque conteneur d'avatar, spécifiez les dimensions de l'image et assurez-vous qu'elles sont affichées sous forme de blocs.

Marquage HTML

Dans le div désigné pour les avatars, incluez un nombre quelconque d'éléments span qui représentent des avatars individuels. Chaque travée doit contenir une image avec l'attribut src approprié pour afficher la photo souhaitée.

Exemple de code

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

<code class="html"><div class="avatars">
  <span class="avatar">
    <img src="https://picsum.photos/70">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/80">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/90">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/100">
  </span>
</div></code>

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!