如何在 CSS 中實現重疊內聯圖像而不依賴負定位或 z 索引，特別是在處理動態圖像計數時？

重疊內嵌影像：CSS 解決方案

實現重疊內嵌影像可能是一個挑戰，但透過仔細的CSS 操作是可能的。在本文中，我們將探索一種利用 Flexbox 和反向順序來創建與提供的圖像類似的效果的解決方案。

問題

原始程式碼使用負定位和 z 索引來重疊影像，但這些方法在動態影像計數方面有其限制。其他選項，例如外部組合映像或使用設定寬度的容器，都有各自的缺點。

解決方案

為了避免這些困難，您可以利用 flexbox 和顛倒影像的順序。以下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>

解釋

• Flex Direction：我們將flex-direction設定為row -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>

此程式碼將產生一行重疊的內聯影像，無需複雜的計算或外部影像處理。該效果是完全動態的，並適應任意數量的圖像。

以上是如何在 CSS 中實現重疊內聯圖像而不依賴負定位或 z 索引，特別是在處理動態圖像計數時？的詳細內容。更多資訊請關注PHP中文網其他相關文章！