连续重叠多个图像

Question

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

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

它应该是这样的：

这是我目前拥有的：

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

我无法共享源代码，但我用虚拟数据 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>

Answer 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>

连续重叠多个图像

Overlap Multiple Images In A Row

css

overlap