在Styled Components中如何使图片重叠？

Question

如果有多个图片，我希望它们重叠在一起。但是只显示3张图片，然后添加一个圆形，里面有一个加号和剩余的图片数量。我的问题是如何以正确的方式将它们重叠在一起？ 类似于这样

Codesandbox: 点击此处

    <div className="resellers">
      {images.slice(0, 2).map((image, i) => (
        <span className="reseller" key={i}>
          <img src={image} alt="" />{" "}
        </span>
      ))}
    </div>
    {images.length > 2 && (
      <div className="plus">
        <span> + {images.length - 2} </span>
      </div>
    )}

- Joseph

Answer 1

在“resellers”容器内呈现所有经销商和加号“div”元素。您需要按相反的顺序呈现头像，以便它们可以正确地“覆盖”右侧的头像。

代码

<Resellers>
  {!!images.slice(2).length && (
    <ResellerPlus>
      <span>+ {images.slice(2).length}</span>
    </ResellerPlus>
  )}
  {images
    .slice(0, 2)
    .reverse()
    .map((image, i) => (
      <Reseller key={i}>
        <img src={image} alt="reseller" />
      </Reseller>
    ))}
</Resellers>

样式化组件

const Resellers = styled.div`
  display: flex;
  align-items: center;
  flex-direction: row-reverse; // <-- un-reverse avatars
`;

将所有通用的CSS样式合并到“reseller” div中。

const Reseller = styled.div`
  align-items: center;
  color: #fff;
  background-color: #bdbdbd;
  border: 4px solid #fff;      // <-- white space around
  border-radius: 50%;          // <-- circle divs
  display: flex;
  flex-direction: row;
  font-family: Nunito-Bold;
  font-size: 1rem;
  height: 40px;
  overflow: hidden;            // <-- hide edges of images
  text-align: center;          // <-- center text
  width: 40px;

  :not(:first-child) {
    margin-right: -0.5rem;     // <-- apply overlap
  }

  img {
    margin-right: 0.5rem;
    object-fit: contain;
  }
`;

const ResellerPlus = styled(Reseller)`
  font-family: Nunito-SemiBold;

  span {
    width: 100%;               // <-- help center text
  }
`;

- Drew Reese

Answer 2

将类似以下代码添加到“.reseller”类中即可获得基本效果。

.reseller {
   margin-right: -15px;
   border-radius: 100%;
   border: solid white 3px;
}

如果您想将它们从左到右堆叠，可以使用 z-index 或 flex-direction 来改变它们呈现的顺序。

- bluecouch

---

你能 fork 我的 CodeSandbox 吗？似乎圆形有点失真。 - Joseph