CSS を使用して、重なり合うインライン画像を作成し、視覚的に魅力的な Web ページデザインを作成するにはどうすればよいでしょうか?-CSSチュートリアル-php.cn

CSS を使用して、重なり合うインライン画像を作成し、視覚的に魅力的な Web ページデザインを作成するにはどうすればよいでしょうか?

Barbara Streisand

リリース： 2024-10-25 18:48:43

オリジナル

843 人が閲覧しました

How can CSS be used to create overlapping inline images for a visually appealing webpage design?

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

複数の画像をオーバーラップして視覚的に魅力的な効果を作成することは、Web デザインにおける一般的なタスクです。これを実現するにはさまざまなアプローチがありますが、CSS は、柔軟な画像の配置と動的な画像のスタッキングを可能にする簡単なソリューションを提供します。

コードの概要

次のコードスニペットは、次のコードスニペットを示しています。インライン画像をオーバーラップするための 1 つの方法:

<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="image1.jpg">
  </span>
  <span class="avatar">
    <img src="image2.jpg">
  </span>
  <span class="avatar">
    <img src="image3.jpg">
  </span>
</div></code>

ログイン後にコピー

説明

このアプローチでは、フレックスボックスを使用して画像を逆の順序で水平に配置します。これにより、最後の画像がスタックの一番下に配置され、最初の画像が一番上に配置されることが保証されます。

各 .avatar 要素は画像を表し、相対的に配置されます。オーバーフロープロパティを非表示に設定することで、画像が親コンテナを超えて拡張されるのを防ぎます。 border プロパティは、各画像の周囲に白い境界線を追加します。

すべての .avatar 要素の margin-left プロパティは、最後の要素を除き、-60px に設定されます。これにより、画像間に負の重なり効果が生じ、積み重ねられたように見えます。

各 .avatar 要素内の画像はブロックとして表示され、コンテナの幅に合わせて拡大縮小されます。画像で width: 100% を使用することで、各画像のアスペクト比が確実に保持されます。

利点