如何使用 HTML 和 CSS 创建图像叠加悬停？

在网页设计中，图像叠加悬停是一种常见的效果。当用户鼠标悬停在图片上方时，图片将显示为另一张图片或颜色。这种效果可以用 HTML 和 CSS 实现。下面是实现方法：

HTML

首先，你需要一个 HTML 图像元素。你可以在 HTML 中使用 <img> 元素来添加图像。下面是一个例子：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
</div>

在这个例子中，我们使用 <img> 元素嵌套在一个 <div> 容器中。<div> 容器可以帮助我们控制图像的大小，对齐方式等等。

CSS

现在，我们需要 CSS 来定义悬停效果。下面是一个基本的 CSS 样式：

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-container img:hover {
  opacity: 0.5;
}

在这个例子中，我们使用了三个 CSS 属性来实现悬停效果：

• position: relative;：将容器设置为相对定位，这是因为我们希望在容器内部创建一个绝对定位的元素。
• display: inline-block;：将容器设置为行内块元素，这样容器的宽度将根据其中的内容自动调整。
• opacity: 0.5;：将图像的不透明度设置为 0.5，这样当用户鼠标悬停在图像上方时，图像将变为半透明状态。

现在，我们需要创建一个绝对定位的元素，以便在图像上方显示一个不同的图像或颜色。这可以通过添加以下 CSS 代码来实现：

.image-container:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(image2.jpg) no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.image-container:hover:after {
  opacity: 1;
}

在这个例子中，我们使用了 ::after 伪元素来添加一个绝对定位的元素。我们还使用了以下 CSS 属性：

• content: "";：设置元素的内容为空。
• position: absolute;：将元素设置为绝对定位。
• top: 0; left: 0;：将元素的位置设置为容器的左上角。
• width: 100%; height: 100%;：将元素的宽度和高度设置为容器的大小。
• background: url(image2.jpg) no-repeat;：将元素的背景设置为另一张图像。
• opacity: 0;：将元素的不透明度设置为 0，这样它将初始隐藏。
• transition: opacity 0.5s ease-in-out;：定义元素的过渡效果。

最后，我们使用 hover 伪类来控制元素的显示和隐藏。当用户鼠标悬停在图像上方时，元素将从透明度为 0 变为透明度为 1，这样另一张图像将显示在图像上方。

完整代码

下面是完整的 HTML 和 CSS 代码：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
</div>

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-container img:hover {
  opacity: 0.5;
}

.image-container:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(image2.jpg) no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.image-container:hover:after {
  opacity: 1;
}

注意将 image1.jpg 和 image2.jpg 更换成你自己的图片文件名。

现在你可以使用以上代码，在你的网页中创建带有图像叠加悬停效果的图片了。