动态改变背景图片

Question

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

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

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

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

Answer 1

这是你必须如何做的。

1. 使用默认值创建您的<div>及其stylebackground-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>

如果您有任何疑问，请询问！