仅使用css

Question

有没有办法只使用css动态更改背景。

我的背景图片不固定。我正在设置JS的风格，如

var background = '';
//backgroundForCurrUser is an array of URL coming from server
for(var x in backgroundForCurrUser) 
{
   background += 'url('+ backgroundForCurrUser[x]+ '),';
}
background = background.substring(0,background.length-1);

var element = document.getElementById("myDashoboard");
element.style.setProperty('background', background );

<div id="myDashoboard"><div>

有没有一种方法我可以幻灯片一次显示背景图像，每次只显示一张图像，而不管图像数量是多少？

Answer 1

正如@zevee评论的那样，你可以在background-image属性上使用CSS动画，这是一个例子：

＆＃13;

＆＃13;

@keyframes change {
    30%   {background-image: url(https://lorempixel.com/400/400/);}
    50%  {background-image: url(https://lorempixel.com/400/400/);}
    80% {background-image: url(https://lorempixel.com/400/400/);}
}

.myDashoboard {
   background-image: url(https://lorempixel.com/400/400/);
    width: 400px;
    height: 400px;
    background-size:cover;
    position: relative;
    animation: change 5s linear 1s infinite;
}

＆＃13;

<div class="myDashoboard">

</div>

＆＃13;

＆＃13;

＆＃13;