Wie kann man mehrere Inline-Bilder effizient überlappen, ohne den Z-Index zu manipulieren?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-10-24 18:45:02

Original

307 Leute haben es durchsucht

Überlappung mehrerer Inline-Bilder

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

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

Ihr aktueller Code:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!