Question

我尝试过但无法完成。

我希望div的背景根据设备宽度覆盖整页，并且每次在同一系统上加载或刷新页面时都应该更改。

我尝试了很多代码，但它们都不适用于我。

现在我使用的脚本是：

<script type="text/javascript">  
window.onload=function(){  
   var thediv=document.getElementById("image");  
   var imgarray = new Array("../bgimages/1.png", "../bgimages/2.png", "../bgimages/3.png");  
   var spot =Math.floor(Math.random()* imgarry.length);  
   thediv.style.background="url("+imgarray[spot]+")";  
}  
</script>

HTML代码如下

<html>
<body>
<div id="image">
 <div class = "container"> 
 </div> <!--container ends-->
</div>

我希望#image div背景覆盖整页。这是我正在使用的CSS：

#image
{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

以下是该页面的链接：http://sahibfreelancer.hostzi.com/ 没有背景图片加载。如果我错过了什么，请告诉我。我希望我提供足够的细节。我从最后一天开始尝试这个。期待您的回复。

Answer 1

我发现了一个错字：

var spot =Math.floor(Math.random()* imgarry.length);

......应该......

var spot =Math.floor(Math.random()* imgarray.length);

......不应该吗？如果你编辑它会有用吗？

Answer 2

由于你在标签中有jQuery，我假设你正在使用jQuery。

但是，据说你没有在代码示例中使用$语法。

以下是使用jQuery设置背景的方法：

$('#image').css('background-image', 'url(' + imageUrl + ')');

修改看起来Ashugeo得到了它。下次检查控制台输出脚本的输出时，它会抛出异常。

另外，如果您使用的是jQuery，那么有更好的方法可以做您正在做的事情。

Answer 3

要使图像占据整个屏幕，您可以在css中指定视口高度，如#image {height:100vh}

现在对于javascript代码，如果图像在指定的URL中，它应该随机加载它们。您可以看到示例the chapter 10。

我唯一做的就是在网络上加载图片，因为我无法在小提琴上本地访问它们。每次都会加载一个不同的图像。

对于页面加载，我使用了一个立即调用的函数，该函数将在加载内容时触发，但您也可以使用onload。

Answer 4

我认为它是你的图像的路径。我粘贴你的代码并更改网址，它有效http://jsbin.com/pozadujeca/edit?js,console,output

如何设置整页背景在页面加载时更改的div的图像

4 个答案: