如何使用 Flexbox 建立重疊的內嵌影像？-css教學-PHP中文網

如何使用 Flexbox 建立重疊的內嵌影像？

Barbara Streisand

發布： 2024-10-24 19:00:29

原創

831 人瀏覽過

How Can I Create Overlapping Inline Images Using Flexbox?

使用Flexbox 有效地重疊內聯影像

為了創建重疊內聯影像的視覺上迷人的顯示，CSS 和HTML 的組合可以用來達到所需的效果。

CSS 樣式

為了獲得最佳效果，請將樣式套用於包含頭像影像的包圍 div。利用flexbox，將顯示屬性設為inline-flex，並將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="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>

登入後複製

以上是如何使用 Flexbox 建立重疊的內嵌影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！