鼠标悬浮图片覆盖背景图片

可以使用CSS中的:hover伪类来实现鼠标悬浮图片覆盖背景图片的效果。具体实现步骤如下：

1. 在HTML中创建两个元素，一个是包含背景图片的元素，另一个是包含悬浮图片的元素。

<div class="background-image"></div>
<div class="hover-image"></div>

2. 使用CSS设置背景图片元素的样式，包括宽度、高度、背景图片等。

.background-image {
  width: 400px;
  height: 300px;
  background-image: url(background.jpg);
  background-size: cover;
  position: relative;
}

3. 使用CSS设置悬浮图片元素的样式，包括宽度、高度、背景图片等，并将其定位到背景图片元素的位置。

.hover-image {
  width: 400px;
  height: 300px;
  background-image: url(hover.jpg);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

4. 使用:hover伪类，当鼠标悬浮在背景图片元素上时，将悬浮图片元素的透明度设置为1，使其显示出来。

.background-image:hover .hover-image {
  opacity: 1;
}

完整的代码如下：

<div class="background-image">
  <div class="hover-image"></div>
</div>

<style>
  .background-image {
    width: 400px;
    height: 300px;
    background-image: url(background.jpg);
    background-size: cover;
    position: relative;
  }
  
  .hover-image {
    width: 400px;
    height: 300px;
    background-image: url(hover.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .background-image:hover .hover-image {
    opacity: 1;
  }
</style>