css两张图片一张显示

今天我们来学习一个css的小技巧——如何让两张图片只显示其中一张。这个技巧可以运用在许多场合，比如说轮播图等等。
首先我们先准备两张图片。假设它们分别叫做"pic1.jpg"和"pic2.jpg"。
接下来我们会使用到一些css的知识。我们要使用"position"和"opacity"这两个属性来实现我们想要的效果。代码如下：

p {
   position: relative;
}
<br>
img {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
}
<br>
img:first-child {
   opacity: 1;
} 

首先我们要在p标签内设置"position: relative;"，这是为了让内部的绝对定位元素相对于p标签进行位置的定位。
然后我们要对img标签进行设置。我们要将它们的"position"属性设置为"absolute"，这是为了让它们从文档流中脱离出来，方便我们进行定位。我们还要将它们的"opacity"属性设置为0，这是为了让图片完全透明，初始状态下不会显示出来。
紧接着我们通过"img:first-child"选择器将第一个图片的"opacity"属性设置为1，这样第一个图片就可以出现了。
这里顺便介绍一下:first-child选择器。这个选择器是用来选择目标元素的第一个子元素的，它可以选择任何元素，而不仅仅是img标签。
好了，现在我们已经完成了代码的编写。接下来我们就可以看到两张图片只有一张会显示了。如果我们想要切换到另一张图片，只需要对"opacity"属性进行修改即可，不需要对html进行修改。
上面是这个案例的全部代码，大家可以试着运行一下，理解一下其中的原理。希望这个小技巧对大家有所帮助！