Comment superposer efficacement plusieurs images en ligne sans manipulation de l'index Z ?-tutoriel CSS-php.cn

Comment superposer efficacement plusieurs images en ligne sans manipulation de l'index Z ?

Susan Sarandon

Libérer： 2024-10-24 18:45:02

original

308 Les gens l'ont consulté

Superposition de plusieurs images en ligne

Votre objectif est de présenter un ensemble d'images superposées semblable à ce qui suit :

How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?

Votre code actuel :

<code class="css">.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
}</code>

Copier après la connexion

<code class="html"><div class="avatars">
    <span class="avatar">
        <img src="https://picsum.photos/70" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/50" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/20" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/100" width="25" height="25"/>
    </span>
    <!-- Variable amount more avatars -->
</div>
<p>4 People</p></code>

Copier après la connexion

Cependant, cette méthode devient peu pratique en raison du nombre variable d'images que vous pouvez rencontrer.

Solution :

Utilisez flexbox et inversez la afin d'éliminer le besoin de manipulation de l'index z :

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

Copier après la connexion

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

Copier après la connexion

Cette solution aligne les images de manière flexible, garantissant un agencement approprié quel que soit le 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!