ul中4个图片都在同一位置上并且先只显示p1
时间: 2024-03-05 16:47:42 浏览: 17
如果您想让四个图片都在同一位置上,并且只显示 p1,可以考虑将四个图片设置为背景图片,并将其都放在同一个 div 元素中,然后只显示 p1。可以像这样添加样式:
```
.Picture {
width: 400px; /* 根据实际需要设置宽度 */
height: 200px; /* 根据实际需要设置高度 */
background-image: url(images/p1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.Picture.p2 {
background-image: url(images/p2.jpg);
}
.Picture.p3 {
background-image: url(images/p3.jpg);
}
.Picture.p4 {
background-image: url(images/p4.jpg);
}
```
这里将四个图片都设置为背景图片,分别对应类名为 p1、p2、p3 和 p4 的 div 元素。由于它们都在同一个 div 中,所以它们就会重叠在一起,只显示 z-index 值最高的 p1 元素。
如果需要在需要的时候显示其他图片,可以使用 JavaScript 动态改变 div 元素的类名。例如,可以使用 jQuery 库来实现:
```
$('.Picture').removeClass('p1').addClass('p2'); // 显示 p2 图片
```
这里将类名为 Picture 的 div 元素的类名从 p1 改为 p2,从而显示 p2 图片。您可以根据需要随时改变类名,从而显示不同的图片。