grid实现图片从左到右重叠展示图片
时间: 2023-07-12 15:21:28 浏览: 52
要实现图片从左到右重叠展示图片,可以使用CSS中的Grid布局。首先,需要将包含图片的容器设置为Grid布局,并设置为一排。然后,对于每个图片,可以将其放置在网格的不同列中,使它们重叠在一起。以下是一个示例代码:
HTML代码:
```
<div class="image-container">
<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代码:
```
.image-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: -50px; /* 负的间距值,使图片重叠 */
}
img {
width: 100%;
height: auto;
position: relative;
z-index: 1; /* 使图片在重叠时可以正常显示 */
}
img:not(:first-child) {
margin-left: -50px; /* 负的外边距值,使图片重叠 */
}
```
在这个代码中,我们将`image-container`容器设置为Grid布局,其中有4列,每列的宽度都为`1fr`。我们还设置了一个负的`grid-gap`值,使图片之间重叠。然后,我们将每个图片的宽度设置为100%,高度自适应,并将其定位为相对位置,并将`z-index`值设置为1,以便它们可以在重叠时正常显示。最后,我们使用`not()`伪类选择器选择除了第一个图片外的所有其它图片,并将它们的左外边距设置为负值,使它们重叠。