css 图片堆叠效果
时间: 2023-07-25 14:42:52 浏览: 91
要实现图片堆叠效果,可以使用CSS的position属性和z-index属性。具体实现方式如下:
HTML代码:
```
<div class="img-stack">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
CSS代码:
```
.img-stack {
position: relative;
}
.img-stack img {
position: absolute;
top: 0;
left: 0;
}
.img-stack img:nth-child(1) {
z-index: 3;
}
.img-stack img:nth-child(2) {
z-index: 2;
}
.img-stack img:nth-child(3) {
z-index: 1;
}
```
解释一下上面的代码:
1. 父元素 `.img-stack` 设置为 `position: relative`,为了让子元素的绝对定位相对于它定位。
2. 子元素 `img` 设置为 `position: absolute`,为了让它们可以绝对定位。
3. 使用 `z-index` 属性控制图片的堆叠顺序,`z-index` 值越大的图片越靠上面。
4. `nth-child` 选择器用于选择第几个子元素,这里用于分别给每张图片设置不同的 `z-index` 值,实现图片的堆叠效果。
通过调整每个图片的 `z-index` 值,可以实现不同的堆叠效果。