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中为我的照片指定静态图像＆＃39;上课，它完美无缺。恩。 background: 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”类，但是您正在使用它的id（'pic'）获取元素div。

要么，请将div元素上'pic'vlaue的属性'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 + "')";

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

1 个答案: