css两个img怎么叠在一起

在网页设计中，我们经常会使用图片来丰富页面的内容。有时候，我们会需要将两个图片叠在一起，以达到更好的视觉效果。那么，CSS中该如何实现呢？下面就给大家介绍一下。

首先，我们需要准备两张图片。这里假设它们的路径分别为img1.png和img2.png。

<img src="img1.png" alt="图片1">
<img src="img2.png" alt="图片2"> 

接下来，我们通过CSS设置两张图片的位置和重叠顺序。我们可以将它们都设置为绝对定位，并通过z-index属性来控制它们的垂直层叠关系。z-index属性值越大的元素就会显示在越上层。

img {
  position: absolute;
}

img:first-child {
  z-index: 1;
}

img:last-child {
  z-index: 2;
} 

在上面的CSS代码中，我们首先将所有的img元素设置为绝对定位。接着，我们通过:first-child和:last-child伪类选择器，分别选中第一个和最后一个img元素，并设置它们的z-index值。这样，第二个img元素就会覆盖在第一个img元素的上方，从而形成两张图片的叠加效果。

最后，我们再来看一下完整的HTML和CSS代码：

<div class="wrapper">
  <img src="img1.png" alt="图片1">
  <img src="img2.png" alt="图片2">
</div>

.wrapper {
  position: relative;
}

img {
  position: absolute;
}

img:first-child {
  z-index: 1;
}

img:last-child {
  z-index: 2;
} 

需要注意的是，我们在HTML代码中将两张图片放在一个div容器内。这个容器需要设置为相对定位，以便它的子元素img能够基于容器做绝对定位。

好了，这就是CSS中将两张图片叠在一起的方法了。希望大家可以学有所获！