css 重叠/叠加多个内联图像

jv4diomz 于 2023-05-19 发布在其他

关注(0)|答案(3)|浏览(143)

我有一个列表的图像，我试图重叠，使他们看起来类似于这一点：

我的代码：

.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
}

<div class="avatars">
    <span class="avatar">
        <img src="https://picsum.photos/70" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/50" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/20" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/100" width="25" height="25"/>
    </span>
    <!-- Variable amount more avatars -->
</div>
<p>4 People</p>

但很明显，我需要一个递增的left值，以及一个递减的z-index作为头像imgs的数量。当然，我可以用@for指令来实现这一点，但问题是，头像的数量是可变的。我正在查看length()函数，但它不像我打算使用的那样工作。
另一个想法，是有一个设置宽度的div，并适合其中的图像，但这有自己的问题（如果有5个图像，或20个，如何控制宽度）。我也可以合并图像，我想他们，在其他地方，而不使用任何CSS。

css

来源：https://stackoverflow.com/questions/48916431/overlapping-overlaying-multiple-inline-images

3条答案

按热度按时间

ep6jt1vc1#

您可以使用flex和逆序，然后不需要z-index：

.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;
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

这是另一个关于规模的想法：

.avatars {
  display: inline-block;
  transform: scale(-1, 1);
}

.avatar {
  position: relative;
  display: inline-block;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
  transform: scale(-1, 1);
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

另一个想法使用面具的情况下，你想保持你的图像的顺序。这也将为您提供图像之间的透明度：

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
  -webkit-mask:radial-gradient(circle 55px at 5px 50%,transparent 99%,#fff 100%);
          mask:radial-gradient(circle 55px at 5px 50%,transparent 99%,#fff 100%);
}

.avatar img {
  width: 100%;
  display: block;
}

body {
  background:pink
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

使用3D变换技巧的另一个想法（没有透明度）

.avatars {
  transform-style:preserve-3d; /* here */
}

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:first-child) {
  margin-left: -60px;
  transform:rotateY(-1deg); /* and here */
}

.avatar img {
  width: 100%;
  display: block;
}

<div class="avatars">
  <span class="avatar">
        <img  src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div>

赞(0）回复(0）举报 2023-05-19

lawou6xi2#

我更喜欢Temani's，但如果你因为必须支持IE9或更早版本而不能使用flex，我将把它留在这里。
请注意，文本方向现在是从右到左，因此您需要颠倒头像的顺序。

.avatar img {
  border-radius: 50%;
  position: relative;
  left: -5px;
  margin-left: -25px;
  z-index: 1;
}

.avatars {
  direction: rtl;  /* This is to get the stack with left on top */
  text-align: left;  /* Now need to explitly align left */
  padding-left: 25px;  /* Same value as the negative margin */
}

<div class="avatars">
  <span class="avatar">
        <img src="https://www.fillmurray.com/50/50" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/100/100" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/200/200" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/150/150" width="50" height="50"/>
    </span>
  <span class="avatar">
        <img src="https://www.fillmurray.com/50/50" width="50" height="50"/>
    </span>
  <!-- Variable amount more avatars -->
</div>

赞(0）回复(0）举报 2023-05-19

jrcvhitl3#

尝试了反向弹性的想法，工作，但混乱了我的名单，因为我需要保持秩序，并有他们提前扭转混乱了另一个名单，我有我需要扭转了😵‍💫😅
我现在要做的是在容器上输入flex -space-x-2
在循环中，使用index，让每一项都得到列表总长度减去当前索引的z索引，这对我来说很有吸引力

z-index: array.length - index

如果你没有使用顺风这是发生了什么

.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
    margin-left: -0.5rem;
}

我剥离了一些顺风魔术，它基本上是选择每个（非隐藏）的孩子后，第一个（所以第一个孩子没有被选中）使用child combinator >和General sibling combinator ~
但是我想我会在某个时候尝试前面提到的Temani的掩码方法

赞(0）回复(0）举报 2023-05-19

我来回答

css 重叠/叠加多个内联图像

3条答案

相关问题

热门标签

最新问答