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

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

您无法在普通CSS中进行超时/间隔操作，必须使用JS。我使用了setInterval函数，该函数用于切换两个元素的.active状态，类.active与opacity添加到元素transition －示例在这里：{{ 3}}

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

2 个答案: