js实现背景图片渐入渐出

你可以使用CSS3的transition属性来实现背景图片的渐入渐出效果，具体步骤如下：

1. HTML中设置一个具有背景图片的容器元素，例如：

<div class="bg-image"></div>

2. 在CSS中设置容器元素的样式，包括背景图片和过渡效果：

.bg-image {
  background-image: url("image.jpg");
  background-size: cover;
  transition: opacity 1s ease-in-out;
}

3. 使用JavaScript来控制容器元素的透明度：

var bgImage = document.querySelector('.bg-image');
bgImage.style.opacity = '0.5'; // 透明度为0.5

4. 如果需要添加过渡效果，只需要在JavaScript中修改透明度的同时，添加一个类名来触发过渡效果：

var bgImage = document.querySelector('.bg-image');
bgImage.classList.add('fade-in'); // 添加类名
bgImage.style.opacity = '1'; // 透明度为1

5. 在CSS中定义.fade-in类的样式，包括过渡效果的开始和结束状态：

.fade-in {
  opacity: 0;
}

这样就可以实现背景图片的渐入渐出效果了。