特に動的な画像数を扱う場合、負の位置決めや Z インデックスに依存せずに CSS でインライン画像の重なりを実現するにはどうすればよいですか?

インライン画像のオーバーラップ: CSS ソリューション

インライン画像のオーバーラップを実現するのは難しい場合がありますが、CSS を注意深く操作すれば可能です。この記事では、フレックスボックスと逆順を利用して、提供された画像と同様の効果を作成するソリューションを検討します。

問題

元のコードでは、負の位置決めと Z インデックスを使用してイメージをオーバーラップしますが、これらの方法には動的なイメージの数に関して制限があります。外部で画像を結合したり、幅を設定したコンテナを使用したりする他のオプションには、それぞれ独自の欠点があります。

解決策

これらの問題を回避するには、フレックスボックスと画像の順序を逆にします。次の CSS コードは、このアプローチを示しています。

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

説明

• フレックス方向: フレックス方向を行に設定します。 -reverse を使用すると、画像の順序が逆になり、最後の画像が左端に表示されます。
• 負のマージン: オーバーラップ効果を作成するには、次を除くすべての画像に負のマージンを適用します。最後のもの。余白の量は、希望する重なり具合に基づいて調整できます。
• 境界線: 各画像の周囲に白い実線の境界線が追加され、画像を視覚的に分離します。

HTML 構造

提供された CSS スタイルに加えて、HTML を次のように調整します。

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

このコードは、複雑な計算や計算を必要とせずに、重複するインライン画像の行を生成します。外部画像操作。この効果は完全に動的であり、任意の数の画像に適応します。

以上が特に動的な画像数を扱う場合、負の位置決めや Z インデックスに依存せずに CSS でインライン画像の重なりを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。