将淡入应用于Javascript背景图像更改

这是我更改背景的代码

document.body.style.backgroundImage = "url(img/space1.jpg)";    

---

如何在JS中添加不透明度转换？

您可以使用

css

来实现这一点。这更简单

document.getElementsByTagName（'img'）[0]。src=”https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRTDYDnkDr8JO6eh9_uXwwZpbHAkLbj02Tsdj3Iy2odb5vPEsXhBA";
。项目淡入淡出{
垂直对齐：顶部；
不透明度：1；
过渡：不透明度1s；
}
.项目淡出：悬停{
不透明度：0.2；
}
编辑：我已经更新了这个主要评论，所以你有完整的答案：）

你不能轻易地对身体背景做这件事。但是，您可以通过添加一个div来实现这一效果，例如（z-index-1执行“技巧”）：

您可能在某个地方有一个JavaScript函数，希望在后台触发动画，并使用以下内容展开它：

var $element = document.getElementById('js_background_filler');
$element.classList.add("background_filler--animate");

你可以随意摆弄
动画：fadein2s在alternativeinfinite中轻松自如（例如，将其设置为20s（秒）使其变慢）。
当背景图像更改时，动画调用看起来很棒吗？实际上，不，我指的是动画背景。因此，当该函数被触发时，背景图像会发生变化，但会淡入：）这将只是“始终”设置动画（使用任何背景，即使您在css中更改背景图像）。如果您不希望这样做：例如，当您希望动画开始时（或通过javascript设置动画），您可以通过“添加类名”来更改此设置。只需将animation属性移动到一个新的类名（例如
.background\u filler--animation{animation property here..}
），如果您想让它开始动画，只需将div的类名设置为包含
background\u filler--animate
。我已经更新了主故事，以包含脚本示例。
.background_filler {
  background-image: url(img/space1);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  bottom: 0;
  opacity: 0.2;
  will-change: opacity;
}

.background_filler--animate {
  -webkit-animation: fadein 2s ease-in alternate infinite;
  -moz-animation: fadein 2s ease-in alternate infinite;
  animation: fadein 2s ease-in alternate infinite;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

var $element = document.getElementById('js_background_filler');
$element.classList.add("background_filler--animate");