Wie kann ich mit Flexbox überlappende Inline-Bilder erstellen?

Überlappende Inline-Bilder effektiv mit Flexbox nutzen

Um eine optisch ansprechende Anzeige überlappender Inline-Bilder zu erstellen, eine Kombination aus CSS und HTML kann eingesetzt werden, um den gewünschten Effekt zu erzielen.

CSS-Styling

Um optimale Ergebnisse zu erzielen, wenden Sie Stile auf ein umfassendes Div an, das die Avatar-Bilder enthält. Setzen Sie mithilfe von Flexbox die Anzeigeeigenschaft auf Inline-Flex und konfigurieren Sie die Flex-Richtung auf Zeilenumkehr, sodass die Bilder von rechts nach links ausgerichtet werden.

Definieren Sie außerdem einzelne Avatar-Container mit einer relativen Positionierung und weisen Sie ihnen eine zu Konsistente Breite und kreisförmiger Rand mithilfe des Randradius. Um zu verhindern, dass Bilder aus ihren Containern herauslaufen, stellen Sie den Überlauf auf „Ausgeblendet“ ein.

Um den Überlappungseffekt zu verstärken, stellen Sie den Rand jedes Avatars, mit Ausnahme des letzten, auf einen negativen Wert ein.

Geben Sie in jedem Avatar-Container die Bildabmessungen an und stellen Sie sicher, dass sie als Blöcke angezeigt werden.

HTML-Markup

In das für Avatare vorgesehene Div können Sie eine beliebige Anzahl von Span-Elementen einschließen repräsentieren einzelne Avatare. Jeder Bereich sollte ein Bild mit dem entsprechenden src-Attribut enthalten, um das gewünschte Foto anzuzeigen.

Beispielcode

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

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox überlappende Inline-Bilder erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!