重叠/叠加多个内联图像 [英] Overlapping/overlaying multiple inline images
问题描述
我有一个要重叠的图片列表,以使它们看起来与此类似:
I have a list of images I'm trying to overlap so that they look similar to this:
我的代码:
.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
来化身img的数量.当然,我可以使用@for
指令来执行此操作,但事实是,有大量的头像img.我当时在看length()
函数,但是它不能以我打算使用的方式起作用.
But obviously, I need an incrementing left
value, and a decrementing z-index
for the number of avatar imgs. Sure, I could do this with the @for
directive, but the thing is, there's a variable amount of avatar imgs. I was looking at the length()
function, but it doesn't work the way I was going to use it.
另一种想法是设置一个固定的div宽度,并在其中适合图像,但这有其自身的问题(如果有5张图像或20张图像,如何控制宽度).我还可以在其他地方按需要组合图像,而不使用任何CSS.
Another idea, is to have a set width div, and fit the images inside that, but that comes with its own issues (what if there are 5 images, or 20, how do control the width). I could also combine the images how I want them, elsewhere and not use any CSS.
推荐答案
您可以使用flex和反向顺序,而无需z-index:
You can use flex and reverse order then no need 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>
这是另一个具有规模的想法:
Here is another idea with scale:
.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>
这篇关于重叠/叠加多个内联图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!