如何在计时器上更改背景图像

Question

我有一个简单的全屏背景图像，如下所示：

body {
/* The background image used */
background-image: url("../images/bg-one.jpg");
/* Full height */
height: 100vh; 
width: 100vw;
/* Hide scroll */
overflow-x: hidden;
overflow-y: hidden;
/* Center and scale the background image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

我想知道如何通过淡入/淡出过渡使背景图像每 5 秒更改一次。抱歉，如果这看起来像是一个新手问题，但我才刚刚开始学习 Js/Jquery。

我的第二个问题是是否可以使用纯CSS3来做到这一点，或者js/jquery会更好吗？

非常感谢， 艾 登

Answer 1

你不能在background-image上制作fade-in fade-out动画，因为这个致敬不能动画化。取而代之的是，您可以制作 2 个彼此重叠的固定元素。

你不能在普通的CSS中做超时/间隔，你必须使用JS。我使用了setInterval函数，它正在切换两个元素的状态.active类.active添加到元素opacity与transition- 示例在这里：https://jsfiddle.net/2cxmeq7p/

Answer 2

我已经使用jquery为您创建了一个测试用例： https://codebrace.com/editor/afec3e661

使用纯 js，您可以将 jquery 替换为 document.body.style.backgroundImage = "url('" + a[i++] + "'(";

具有淡入/淡出效果的背景更改测试用例： https://codebrace.com/editor/afef034d6