如何使用 Flexbox 创建重叠的内嵌图像？-css教程-PHP中文网

如何使用 Flexbox 创建重叠的内嵌图像？

Barbara Streisand

发布： 2024-10-24 19:00:29

原创

830 人浏览过

How Can I Create Overlapping Inline Images Using Flexbox?

使用 Flexbox 有效地重叠内联图像

为了创建重叠内联图像的视觉上迷人的显示，CSS 和 HTML 的组合可以用来达到所需的效果。

CSS 样式

为了获得最佳效果，请将样式应用于包含头像图像的包围 div。利用flexbox，将显示属性设置为inline-flex，并将flex方向配置为row-reverse，从而从右到左对齐图像。

此外，定义具有相对定位的各个头像容器，并为它们分配一个使用边框半径一致的宽度和圆形边框。为了防止图像溢出其容器，请将溢出设置为隐藏。

要增强重叠效果，请将每个头像（不包括最后一个）的边距调整为负值。

在每个头像容器中，指定图像尺寸并确保它们显示为块。

HTML 标记

在为头像指定的 div 中，包含任意数量的 span 元素，代表个人化身。每个范围应包含具有适当 src 属性的图像，以显示所需的照片。

示例代码

<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>

登录后复制

以上是如何使用 Flexbox 创建重叠的内嵌图像？的详细内容。更多信息请关注PHP中文网其他相关文章！