循环更改背景图像

Question

对我来说，这似乎是一个简单的想法 - 当您单击 div 时，该 div 的背景图像会发生变化。到目前为止，我已经尝试过使用颜色（将颜色名称放入数组中，将 "box.style.backgroundImage" 更改为 "box.style.backgroundColor"）它适用于颜色，但不适用于图像。知道为什么吗？

Javascript:

var box = document.getElementById('box'),
imgs = ['/image.jpg', '/image2.jpg'];

box.onclick = function () {
img = imgs.shift();
imgs.push(img);

box.style.backgroundImage = img;
};

HTML:

<div id='box'></div>

CSS:

#box {
background: url("https://priteshgupta.com/wp-content/uploads/2011/06/html-ipsum.png");
width:200px;
height:200px;
margin:50px;
}

Answer 1

你还需要url("..."):

box.style.backgroundImage = 'url("' + img + '")';

Answer 2

CSSbackground-image属性期望 URL 包含在 'url(...)':

中

box.style.backgroundImage = 'url(' + img + ')';

循环更改背景图像

Change Background Image in a loop

html

javascript

css

image

background-image