如何使用 CSS Flexbox 重疊內嵌圖片？

重疊多個圖像：綜合指南

重疊圖像可以為您的網頁增添視覺趣味和深度。在本文中，我們將解決重疊多個內聯影像以創建視覺上引人注目的效果的挑戰。

問題

要重疊內嵌影像，我們需要找到一種方法將它們放置並分層放置。此外，我們必須確保影像保持其預期的順序和視覺層次結構。

解決方案：利用 Flex 和逆序

一個有效的解決方案是利用 CSS flexbox。透過將 .avatars 容器設定為顯示為具有 flex-direction: row-reverse 的 inline-flex，我們可以實現影像的相反順序。這允許最後一個圖像與倒數第二個圖像重疊，依此類推。

為了正確定位重疊影像，我們為除最後一個頭像之外的所有頭像添加負左邊距。這使得影像能夠以所需的數量堆疊和重疊。

以下是範例 CSS 程式碼片段：

<code class="css">.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar {
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  width: 100px;
}

.avatar:not(:last-child) {
  margin-left: -60px;
}</code>

此解決方案消除了對複雜 JavaScript 或其他圖像的需要，並提供了響應式以及重疊內嵌圖像的靈活方式。

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