📌  相关文章
📜  css 2 图像并排堆叠 - CSS (1)

📅  最后修改于: 2023-12-03 14:40:16.317000             🧑  作者: Mango

CSS2 图像并排堆叠 - CSS

CSS 可以帮助我们实现图像并排堆叠的效果，为网页设计提供更多可能性。在本文中，我们将学习如何使用 CSS2 来实现此目的。

实现方式

我们可以使用 CSS2 中的 position 和 z-index 属性来使多个图像堆叠在一起。以下是一个示例：

img {
  position: absolute;
}

#img1 {
  z-index: 1;
}

#img2 {
  z-index: 2;
}

#img3 {
  z-index: 3;
}

这里使用了 position: absolute; 让图像的定位方式变为绝对定位，然后使用 z-index 来控制它们的堆叠顺序。z-index 值越高的图像将位于堆叠的最前面。

示例

以下是一个完整的示例代码片段：

<!DOCTYPE html>
<html>
<head>
  <title>图像并排堆叠示例</title>
  <style>
    img {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 2px solid white;
    }

    #img1 {
      z-index: 1;
      left: 0px;
      top: 0px;
    }

    #img2 {
      z-index: 2;
      left: 50px;
      top: 50px;
    }

    #img3 {
      z-index: 3;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
  <img id="img1" src="https://picsum.photos/200/200">
  <img id="img2" src="https://picsum.photos/200/200">
  <img id="img3" src="https://picsum.photos/200/200">
</body>
</html>

这里使用了三张图片来演示堆叠效果，它们的位置和 z-index 属性都不同。我们还为这些图片添加了样式，如 border 和 width/height，以使它们更容易区分。

总结

在本文中，我们了解了如何使用 CSS2 的 position 和 z-index 属性来实现图像并排堆叠的效果。通过使用这些技术，我们可以在网页中创建出更加丰富和独特的设计。