如何在不进行 Z-Index 操作的情况下有效地重叠多个内联图像？-css教程-PHP中文网

如何在不进行 Z-Index 操作的情况下有效地重叠多个内联图像？

Susan Sarandon

发布： 2024-10-24 18:45:02

原创

308 人浏览过

重叠多个内联图像

您的目标是呈现一组类似于以下内容的重叠图像：

How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?

您当前的代码：

<code class="css">.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
}</code>

登录后复制

<code class="html"><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></code>

登录后复制

但是，由于您可能遇到的图像数量不同，此方法变得不切实际。

解决方案：

利用 Flexbox 并反转排序以消除 z-index 操作的需要：

<code class="css">.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;
}</code>

登录后复制

<code class="html"><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></code>

登录后复制

此解决方案灵活对齐图像，无论图像数量如何，都能确保正确排列。

以上是如何在不进行 Z-Index 操作的情况下有效地重叠多个内联图像？的详细内容。更多信息请关注PHP中文网其他相关文章！