[分享]css两张图片切换效果

在网页开发中，图片切换效果是非常常见的。本文将介绍一种使用CSS实现两张图片切换效果的方法。首先需要准备两张图片，一张为默认显示的图片，一张为被替换的图片。下面是HTML代码： 切换图片 上面的...

在网页开发中，图片切换效果是非常常见的。本文将介绍一种使用CSS实现两张图片切换效果的方法。

首先需要准备两张图片，一张为默认显示的图片，一张为被替换的图片。

下面是HTML代码：

<div id="image-container">
  <img src="default-image.jpg" alt="" id="default-image">
  <img src="replace-image.jpg" alt="" id="replace-image">
</div>
<button id="image-button">切换图片</button> 

上面的代码创建了一个包含两个img元素的div容器和一个按钮，用于触发切换图片的操作。

接下来是CSS代码：

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

#replace-image {
  opacity: 0;
  z-index: 1;
}

#image-container:hover #default-image {
  opacity: 0;
  z-index: 1;
}

#image-container:hover #replace-image {
  opacity: 1;
  z-index: 2;
}

#image-button {
  display: block;
  margin-top: 20px;
} 

CSS代码中首先设置了img元素的位置为绝对定位，使其覆盖在一起。然后将被替换的图片设置为透明，并将其z-index设置为1，使其在默认情况下位于底部。

当鼠标悬停在图片容器上时，通过设置默认图片的透明度为0并将其z-index设置为1，同时将被替换的图片的透明度设置为1并将其z-index设置为2，实现了图片切换的效果。

最后，将按钮的样式设置为块级元素，使其在图片容器下方显示，并加入一些上边距。

以上就是使用CSS实现两张图片切换效果的方法。通过简单的CSS代码，就可以实现炫酷的图片效果，为网页增添不少活力。