Wie kann man mehrere Inline-Bilder effizient überlappen, ohne den Z-Index zu manipulieren?

Überlappung mehrerer Inline-Bilder

Sie möchten eine Reihe überlagerter Bilder ähnlich wie folgt präsentieren:

Ihr aktueller Code:

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

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

Diese Methode wird jedoch aufgrund der unterschiedlichen Anzahl von Bildern, auf die Sie möglicherweise stoßen, unpraktisch.

Lösung:

Verwenden Sie Flexbox und kehren Sie das um So entfällt die Notwendigkeit einer Z-Index-Manipulation:

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

Diese Lösung richtet die Bilder flexibel aus und gewährleistet so die richtige Anordnung unabhängig von der Bildanzahl.

Das obige ist der detaillierte Inhalt vonWie kann man mehrere Inline-Bilder effizient überlappen, ohne den Z-Index zu manipulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!