Css 如何做或这种效果的名称是什么？（描述中的图像）

我需要做这个壮举。当它有3个以上的图像时，它将放置第四个图像和剩余的图像数。 我目前正在用reactjs编写代码

代码：

---

您可以尝试使用这种代码：

<Speaker>
 {event.speakers.map((speakerItem, index) => {
   if (index < 3) {
       return <img src={speakerItem.photo} />
   } else if (index === 3) {
      return <MyBubble count={speakerItem.length - 3} />
   }

 })}
</Speaker>

其中MyBubble是渲染剩余数字的自定义组件

export const Speaker = styled.div`
  margin-left: 10px;

  img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 22px;
    border: 2px solid #fff;
    margin-left: -10px;
  }
`;

<Speaker>
 {event.speakers.map((speakerItem, index) => {
   if (index < 3) {
       return <img src={speakerItem.photo} />
   } else if (index === 3) {
      return <MyBubble count={speakerItem.length - 3} />
   }

 })}
</Speaker>