javascript - 使用 Javascript 和 DOM 在 div 元素中加载图像

Question

基本上，我想要做的是加载图像，使整个图像占据浏览器框架的背景，我已经能够静态地做到这一点没有问题。我正在尝试实现它，以便我可以动态加载随机生成的不同图像。

如果我使用 document.body.style.backgroundImage="url('img/"+ image.image + "')"; 我可以看到它加载的图像很好。但有时图像底部边界附近会有空白。

理想情况下，我想将它设置在一个 div 中，但是，这也不会加载，我只剩下白色背景: document.getElementById("pic").style.backgroundImage = "url('img/"+ image.image + "')"; 我也试过: document.getElementById("pic").style.background = "url('img/"+ image.image + "')";

如果我在 css 中为我的“图片”类指定一个静态图像，它会完美地工作。 前任。 背景:url("http://lorempixel.com/1600/1200/nature/");

这是 CSS:

body {  
  top:0px;
  left:0px;
  height:100%;
  width:100%;  
  z-index:-1;
  opacity:1;
  background-repeat: no-repeat;
  background-size: cover;
}
.pic {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:-1;
  opacity:1;
  background-repeat: no-repeat;
  background-size: cover;
}

我可以使用 body 或 div 元素，只要我可以在框架中动态加载图像而没有空格或重复。另外，我不明白为什么我根本无法让 div 的背景动态加载，如果有人可以解释我在那里做错了什么。任何帮助将不胜感激。

Answer 1

您似乎在 div 标签上设置了类“pic”，但您正在获取元素 div 及其 id('pic')。

或者，将 div 元素上的 'pic' 值的属性 'class' 更改为 'id'，

喜欢用

<div id="pic">

代替

<div class="pic">

或者，使用getElementsByClassName()方法，比如

document.getElementsByClassName("pic")[0].style.backgroundImage = "url('img/" + image.image + "')";

代替

document.getElementById("pic").style.backgroundImage = "url('img/" + image.image + "')";