鼠标悬浮图片覆盖背景图片 不悬浮就变回原样

可以使用CSS来实现鼠标悬浮时覆盖背景图片的效果。你可以在HTML中嵌入CSS代码，或者将CSS代码写在外部样式表中。

以下是一个示例代码：

HTML：

<div class="container">
  <img src="background.jpg" class="background-image">
  <img src="overlay.jpg" class="overlay-image">
</div>

CSS：

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

.background-image {
  position: absolute;
  top: 0;
  left: 0;
}

.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 初始时隐藏 */
}

.container:hover .overlay-image {
  opacity: 1; /* 鼠标悬浮时显示 */
}

解释：

1. 将两个图片放在一个容器中，并将容器样式设置为`position: relative`。
2. 设置背景图片的样式为`position: absolute; top: 0; left: 0;`，让其覆盖整个容器。
3. 设置覆盖图片的样式为`position: absolute; top: 0; left: 0;`，并设置初始时的不透明度为0。
4. 当鼠标悬浮在容器上时，将覆盖图片的不透明度设置为1，即显示覆盖图片。