CSS 背景 styles 在使用 JavaScript 更改背景后停止工作

Question

我正在使用腳本在我的網站上經過一段時間后自動更改背景圖像。 Everything works fine but after changing to new background images, I have to add background styles in JavaScript again because background styles in my css file stop working right after that

只有transition: 2s仍然有效，所以我必須再次在 JavaScript 中添加所有背景 styles ...

但是在 JavaScript 中添加背景 styles 會使屏幕在每次背景更改時閃爍。 因此，如果可能的話，我正在尋找解決方案。

 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速記。

如果您只是在 javascript 中重置background-image ，它不會重置其他所有內容。