要实现背景图片的淡入淡出过渡效果并解决重叠问题，可以使用CSS的opacity属性和transition属性。以下是一个示例代码：

HTML:

CSS:

.background-container {
  position: relative;
  width: 400px;
  height: 300px;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("image1.jpg");
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.background-image.fade-in {
  opacity: 1;
}

.background-image.fade-out {
  opacity: 0;
}

JavaScript:

const container = document.querySelector('.background-container');
const image = document.querySelector('.background-image');

function fadeInImage() {
  image.classList.add('fade-in');
  image.classList.remove('fade-out');
}

function fadeOutImage() {
  image.classList.add('fade-out');
  image.classList.remove('fade-in');
}

function changeImage() {
  if (image.style.opacity === '0') {
    image.style.backgroundImage = 'url("image1.jpg")';
    fadeInImage();
  } else {
    image.style.backgroundImage = 'url("image2.jpg")';
    fadeOutImage();
  }
}

container.addEventListener('mouseenter', changeImage);
container.addEventListener('mouseleave', changeImage);

在这个例子中，.background-container是放置背景图片的容器，它需要设置为相对定位，并指定宽度和高度。.background-image是实际的背景图片元素，它使用绝对定位，覆盖整个容器，并设置了opacity为0，以实现淡入淡出效果。transition属性指定了过渡效果的持续时间和缓动函数。

JavaScript部分使用了mouseenter和mouseleave事件来监听鼠标进入和离开容器的事件，并在事件处理函数中改变背景图片和添加/删除fade-in和fade-out类来触发过渡效果。

这样，当鼠标进入容器时，背景图片会淡入显示；当鼠标离开容器时，背景图片会淡出隐藏。