css 多个图片堆叠但不完全重叠
时间: 2023-07-28 14:47:33 浏览: 55
要实现多个图片堆叠但不完全重叠的效果,可以在上一个问题的基础上稍作修改。具体实现方式如下:
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">
<img src="image4.jpg" alt="Image 4">
</div>
```
CSS代码:
```
.img-stack {
position: relative;
}
.img-stack img {
position: absolute;
top: 0;
left: 0;
}
.img-stack img:nth-child(1) {
z-index: 4;
}
.img-stack img:nth-child(2) {
z-index: 3;
left: 20px;
top: 20px;
}
.img-stack img:nth-child(3) {
z-index: 2;
left: 40px;
top: 40px;
}
.img-stack img:nth-child(4) {
z-index: 1;
left: 60px;
top: 60px;
}
```
解释一下上面的代码:
1. HTML代码中新增了一张图片,这里一共有四张图片。
2. 父元素 `.img-stack` 设置为 `position: relative`,为了让子元素的绝对定位相对于它定位。
3. 子元素 `img` 设置为 `position: absolute`,为了让它们可以绝对定位。
4. 使用 `z-index` 属性控制图片的堆叠顺序,`z-index` 值越大的图片越靠上面。
5. 通过调整每个图片的 `left` 和 `top` 属性值,可以实现图片堆叠时的偏移量,从而实现不完全重叠的效果。
通过调整每个图片的 `z-index` 值和 `left` 和 `top` 属性值,可以实现不同的堆叠效果。