css怎么两张图片叠放

CSS是一种样式语言，可以帮助我们美化网页。在这篇文章中，我将向大家介绍如何使用CSS实现两张图片的叠放效果。

HTML

<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

CSS

.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
}

.container img:nth-child(2) {
  z-index: -1;
}

首先，我们需要在HTML中创建一个包含两张图片的div容器。然后，在CSS中，我们将设置div容器的position属性为relative，这样它内部的元素位置将相对于其自身的位置。接下来，我们将两张图片都设置为绝对定位，这样它们便可以根据div容器的位置进行定位。

最后，我们可以使用z-index属性来控制叠放顺序。元素的z-index值越高，它就越靠近视图器表面。在这种情况下，我们将第二张图片（即第二个img元素）的z-index设置为-1，这将使它出现在第一张图片的后面。

通过这些CSS规则，我们就可以实现两张图片的叠放效果了。如果您需要自定义布局和样式，可以根据自己的需求进行调整。祝您愉快地设计网页！