Wie kann ich in CSS überlappende Inline-Bilder erzielen, ohne auf negative Positionierung oder Z-Index angewiesen zu sein, insbesondere wenn es um dynamische Bildzählungen geht?

Überlappende Inline-Bilder: Eine CSS-Lösung

Überlappende Inline-Bilder zu erzielen kann eine Herausforderung sein, ist aber mit sorgfältiger CSS-Manipulation möglich. In diesem Artikel untersuchen wir eine Lösung, die Flexbox und umgekehrte Reihenfolge verwendet, um einen Effekt zu erzeugen, der dem bereitgestellten Bild ähnelt.

Das Problem

Der Originalcode verwendet Negative Positionierung und Z-Index zum Überlappen von Bildern, diese Methoden haben jedoch Einschränkungen, wenn es um dynamische Bildzählungen geht. Andere Optionen, wie das externe Kombinieren von Bildern oder die Verwendung eines Containers mit festgelegter Breite, bringen ihre eigenen Nachteile mit sich.

Die Lösung

Um diese Schwierigkeiten zu vermeiden, können Sie Flexbox und nutzen die Reihenfolge der Bilder umkehren. Der folgende CSS-Code demonstriert diesen Ansatz:

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

Erklärung

• Flex Direction: Wir setzen die Flex-Richtung auf row -Umkehren, um die Reihenfolge der Bilder umzukehren, wobei das letzte Bild ganz links erscheint.
• Negativer Rand: Um einen Überlappungseffekt zu erzeugen, wenden wir einen negativen Rand auf alle Bilder außer an der letzte. Die Größe des Randes kann basierend auf der gewünschten Überlappung angepasst werden.
• Rand: Um jedes Bild herum wird ein weißer, durchgezogener Rand hinzugefügt, um sie optisch zu trennen.

HTML-Struktur

Passen Sie Ihr HTML zusammen mit den bereitgestellten CSS-Stilen wie folgt an:

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

Dieser Code erzeugt eine Reihe überlappender Inline-Bilder, ohne dass komplexe Berechnungen oder erforderlich sind externe Bildmanipulation. Der Effekt ist volldynamisch und passt sich beliebig vielen Bildern an.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS überlappende Inline-Bilder erzielen, ohne auf negative Positionierung oder Z-Index angewiesen zu sein, insbesondere wenn es um dynamische Bildzählungen geht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!