html实现几张图片叠在一起
时间: 2024-05-16 09:17:40 浏览: 21
可以使用CSS中的z-index属性来实现几张图片叠在一起。你可以将每张图片放在一个div中,并使用position属性将它们相对定位。然后,使用z-index属性来指定哪张图片应该位于其他图片的上方。以下是一个示例代码:
```
<div class="img-container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
<style>
.img-container {
position: relative;
}
.img1, .img2, .img3 {
position: absolute;
top: 0;
left: 0;
}
.img1 {
background-image: url("img1.jpg");
z-index: 3;
}
.img2 {
background-image: url("img2.jpg");
z-index: 2;
}
.img3 {
background-image: url("img3.jpg");
z-index: 1;
}
</style>
```
在这个示例中,我们创建了一个包含三个div的容器,每个div代表一张图片。我们使用绝对定位将它们放置在相同的位置,并使用z-index属性指定它们的堆叠顺序。在这个例子中,img1位于最顶层,img2位于中间,img3位于最底层。