Overlapping/overlaying 多张内联图片
Overlapping/overlaying multiple inline images
我有一个图像列表,我正在尝试重叠这些图像,使它们看起来类似于:
我的代码:
.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
头像图像数量。当然,我可以使用 @for
指令来做到这一点,但问题是,头像 imgs 的数量是可变的。我正在查看 length()
函数,但它无法按照我打算使用的方式工作。
另一个想法是设置宽度 div,并在其中放置图片,但这有其自身的问题(如果有 5 张图片或 20 张图片,如何控制宽度).我还可以在其他地方按照我想要的方式组合图像,而不使用任何 CSS.
您可以使用 flex 和 reverse order 然后不需要 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>
我更喜欢,但是如果你因为必须支持 IE 9 或更早版本而不能使用 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>
我有一个图像列表,我正在尝试重叠这些图像,使它们看起来类似于:
我的代码:
.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
头像图像数量。当然,我可以使用 @for
指令来做到这一点,但问题是,头像 imgs 的数量是可变的。我正在查看 length()
函数,但它无法按照我打算使用的方式工作。
另一个想法是设置宽度 div,并在其中放置图片,但这有其自身的问题(如果有 5 张图片或 20 张图片,如何控制宽度).我还可以在其他地方按照我想要的方式组合图像,而不使用任何 CSS.
您可以使用 flex 和 reverse order 然后不需要 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>
我更喜欢
请注意,文字方向现在是从右到左,因此您需要颠倒头像的顺序。
.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>