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

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

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

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

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

Answer 2

您无法在background-image上制作fade-in fade-out动画，因为无法对该属性进行动画处理。 取而代之的是，您可以将2个固定的元素放置在彼此上方。

您不能在普通CSS中设置超时/间隔，而必须使用JS。 我使用过setInterval函数来切换两个元素的.active状态，类.active通过transition添加到元素opacity -示例在这里： https : .active