如何设置整页背景随页面加载而变化的div图像
[英]How to set full page background Image of a div that changes on page load
问题描述
我尝试过但无法完成。
我希望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/没有背景图像加载。 如果我想念任何东西，请告诉我。 我希望我能提供足够的细节。 我从最后一天开始尝试此操作。 期待您的回复。
4 个解决方案
解决方案1
0 2015-08-29 16:17:35
我发现了一个错字：
var spot =Math.floor(Math.random()* imgarry.length);
... 应该 ...
var spot =Math.floor(Math.random()* imgarray.length);
...不是吗？ 如果您进行编辑，是否可行？
解决方案2
0 2015-08-29 16:18:14
由于标签中包含jQuery，因此我假设您使用的是jQuery。
但这就是说您在代码示例中没有使用$语法。
这是使用jQuery设置背景的方法：
$('#image').css('background-image', 'url(' + imageUrl + ')');
编辑：看起来像Ashugeo做到了。 下次检查控制台的脚本输出时，它会抛出异常。
另外，如果您使用的是jQuery，则有更好的方法来完成您的工作。
解决方案3
0 2015-08-29 16:45:14
要使图像占据整个屏幕，您可以像这样#image {height:100vh}在CSS中指定视口高度
现在，对于javascript代码，如果图像位于指定的url中，一切对我来说看起来都很好，它应该随机加载它们。 您可以在此处查看示例。
我唯一要做的就是将图像加载到Web上，因为我无法在小提琴上本地访问它们。 每次加载不同的图像。
至于页面加载，我使用了立即调用功能，该功能将在加载内容时触发，但您也可以使用onload 。
解决方案4
0 2015-08-29 17:08:10
我认为这是您拍摄图片的路径。 我粘贴了您的代码并更改了网址，它可以正常运行http://jsbin.com/pozadujeca/edit?js，控制台，输出
全页尺寸背景图片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.