javascript - 动态更改背景图像

Question

我想在评论的帮助下修改背景中的图像。

图像来自 tmdb API。 所以我认为您必须创建一个背景图像组件并将其传递给 URL。

我知道 CSS 有 background-image 属性，但它适用于静态图像 ...

什么是最好的方法，我想让这个组件可重用。

Answer 1

这是您必须执行的操作。

1. 创建您的 <div>及其 style默认 background-image
2. 创建 3 <button>触发你的功能changeImage()并提供一个参数
3. 更改 style.backgroundImage与 JavaScript如下所示:

function changeImage(category){
  document.getElementById('div-bg').style.backgroundImage = 'url("https://source.unsplash.com/320x240/?' + category + '")';
}

#div-bg {
  display: block;
  width: 320px;
  height: 240px;
  background-image: url("https://source.unsplash.com/320x240/?sky");
}

<div id="div-bg"></div>

<button onclick="changeImage('nature')">Nature</button>
<button onclick="changeImage('animal')">Animal</button>
<button onclick="changeImage('fire')">Fire</button>

如有任何问题，请提出!