我有一个我试图重叠的图像列表,所以它们看起来像这样:
我的代码:
.avatar img {
border-radius: 50%;
position: relative;
left: -5px;
z-index: 1;
}
<div class="avatars">
<span class="avatar">
<img src="https://lorempixel.com/50/50/" width="25" height="25"/>
</span>
<span class="avatar">
<img src="https://lorempixel.com/50/50/" width="25" height="25"/>
</span>
<span class="avatar">
<img src="https://lorempixel.com/50/50/" width="25" height="25"/>
</span>
<span class="avatar">
<img src="https://lorempixel.com/50/50/" width="25" height="25"/>
</span>
<!-- Variable amount more avatars -->
</div>
<p>4 People</p>
但很明显,我需要一个递增的left
值,并且减少z-index
的头像imgs的数量。当然,我可以用@for
指令做到这一点,但事实是,有一个可变数量的头像imgs。我正在查看length()
函数,但它不会像我使用它那样工作。
另一个想法是,有一个设置宽度div,并在其中拟合图像,但它有自己的问题(如果有5个图像,或20,如何控制宽度)。我也可以在其他地方将图像组合在一起,而不是使用任何CSS。
你可以使用flex和reverse order然后不需要z-index:
.avatars {
display: inline-flex;
flex-direction: row-reverse;
padding-left:50px;
}
.avatar {
margin-left: -25px;
position: relative;
border:1px solid #fff;
border-radius: 50%;
overflow:hidden;
width:50px;
height:50px;
}
.avatar img {
width:50px;
height:50px;
}
<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>
<!-- Variable amount more avatars -->
</div>
<p>4 People</p>
这是规模的另一个想法:
.avatars {
display: inline-block;
transform:scale(-1,1);
padding-left:50px;
}
.avatar {
margin-left: -25px;
position: relative;
display:inline-block;
border:1px solid #fff;
border-radius: 50%;
overflow:hidden;
width:50px;
height:50px;
}
.avatar img {
width:50px;
height:50px;
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>
<!-- Variable amount more avatars -->
</div>
<p>4 People</p>
我更喜欢Temani's,但如果你不能使用flex因为你必须支持IE 9或更早版本,我会留在这里。
请注意,文本方向现在是从右到左,因此您需要反转您的头像的顺序。
.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>