我有一个尝试重叠的图像列表，以便它们看起来与此类似：
My code:
.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。
您可以使用 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>