如何設置整頁背景隨頁面加載而變化的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.