javascript - 使用 JavaScript 更改背景后，CSS 背景样式停止工作

Question

我正在使用脚本在我的网站上经过一段时间后自动更改背景图像。一切正常，但更改为新的背景图像后，我必须再次在 JavaScript 中添加背景样式，因为我的 css 文件中的背景样式在此之后立即停止工作
只有 transition: 2s仍然有效，所以我必须再次在 JavaScript 中添加所有背景样式...
但是在 JavaScript 中添加背景样式会使屏幕在每次背景更改时闪烁。因此，如果可能，我正在寻找解决方案。

const body = document.querySelector('body');
body.style.background = 'url("new_bg")';
body.style.backgroundRepeat = 'no-repeat';
body.style.backgroundSize = '100%';
body.style.backgroundAttachment = 'fixed';

body {
  background: url("bg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
  transition: 2s;
}

Answer 1

这里发生的事情是每次调用脚本时都会重置整个背景样式。
这两行是不同的:

.someClass {
    background-image: url('');
}
.someClass {
    background: url('');
}

第一个示例仅重置背景图像。第二个重置后台的每个属性，因为您使用的是 background速记。
如果您只是重置 background-image在 javascript 中，它不会重置其他所有内容。