连续重叠多个图像答案

【问题标题】：Overlap Multiple Images In A Row连续重叠多个图像
【发布时间】：2021-12-13 21:42:38
【问题描述】：

我知道有几个关于“重叠图像”主题的主题，但我找不到一个可以解决我的具体问题的主题。

我有五个圆形图像，我需要以轻微重叠的方式显示它们，有点像一副纸牌放在扇子里时的样子。

它应该是这样的：

这是我目前拥有的：

我发现的所有代码示例都旨在重叠两个方形图像，我不知道如何转换为这种情况。任何帮助将不胜感激。我试过搞乱网格布局和负边距，但这只是一团糟。

我无法共享源代码，但我用虚拟数据 in this codepen 重新创建了完全相同的 HTML/CSS。

代码：

.main-container {
  height: fit-content;
  padding-top: 3rem;
}

#icons-container {
  display: flex;
  position: relative;
  justify-content: center;
}

.icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid white;
}

<div class="main-container">
  <div id="icons-container">
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1" />
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2" />
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3" />
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4" />
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5" />
    </div>
  </div>
</div>

【问题讨论】：

Check this article, it might help

标签： css overlap

【解决方案1】：

您可以在icon 上使用margin-right/margin-left。要重叠，让margin-right 有负值

.main-container {
  height: fit-content;
  padding-top: 3rem;
}

#icons-container {
  display: flex;
  position: relative;
  justify-content: center;
}

.icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid white;
  margin-right: -15px;
}

<div class="main-container">
  <div id="icons-container">
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1">
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2">
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3">
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4">
    </div>
    <div class="single-icon-container">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5">
    </div>
  </div>

</div>

【讨论】：

也只是为了分享——我必须在主容器中添加 225 像素的高度/宽度以及边框，以便所有图像都在一个框内。此时，图像上的负边距使图像容器看起来偏离中心。我可以通过在图像的父容器（'main-container'）上添加 margin-left: -15px 来修复它。