Flexbox を使用して重複するインライン画像を作成するにはどうすればよいですか?

Flexbox を効果的に使用してインライン画像を重ねる

インライン画像を重ね合わせた視覚的に魅力的な表示を追求するには、CSS と HTML を組み合わせます。

CSS スタイリング

最適な結果を得るには、アバター画像を含む包括的な div にスタイルを適用します。フレックスボックスを使用して、表示プロパティを inline-flex に設定し、フレックス方向を row-reverse に設定して、画像を右から左に配置します。

さらに、相対的な位置を使用して個々のアバター コンテナを定義し、それらに一定の幅とボーダー半径を使用した円形ボーダー。画像がコンテナからこぼれないようにするには、オーバーフローを非表示に設定します。

重なり合う効果を高めるには、最後のアバターを除く各アバターの余白を負の値に調整します。

各アバター コンテナ内で、画像の寸法を指定し、それらがブロックとして表示されることを確認します。

HTML マークアップ

アバター用に指定された div 内に、次のような任意の数の Span 要素を含めます。個々のアバターを表します。各スパンには、目的の写真を表示するための適切な src 属性を持つ画像が含まれている必要があります。

サンプル コード

<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="/static/imghwm/default1.png" data-src="https://picsum.photos/70" class="lazy" alt="Flexbox を使用して重複するインライン画像を作成するにはどうすればよいですか?" >
  </span>
  <span class="avatar">
    <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/80" class="lazy" alt="Flexbox を使用して重複するインライン画像を作成するにはどうすればよいですか?" >
  </span>
  <span class="avatar">
    <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/90" class="lazy" alt="Flexbox を使用して重複するインライン画像を作成するにはどうすればよいですか?" >
  </span>
  <span class="avatar">
    <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/100" class="lazy" alt="Flexbox を使用して重複するインライン画像を作成するにはどうすればよいですか?" >
  </span>
</div></code>

以上がFlexbox を使用して重複するインライン画像を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。