如何在刷新時更改全屏背景？

Question

我想在刷新時將此網頁的背景圖片替換為備用圖片。

我怎么能做到這一點？

Offliberty這樣做。 我查看了源代碼，但無法弄明白。 我發現它是用服務器端腳本完成的，而我的主機確實支持它，並且一個名為sizzle的腳本正在為Offliberty網站提供支持，但是當我查看代碼時我感到很困惑。

Answer 1

如果您願意，您也可以在客戶端輕松完成此操作。 在css中創建多個類：

backgr0 { background-image: url('images/somepic.jpg'); }
backgr1 { background-image: url('images/somepic.jpg'); }
backgr2 { background-image: url('images/somepic.jpg'); }
backgr3 { background-image: url('images/somepic.jpg'); }
backgr4 { background-image: url('images/somepic.jpg'); }

然后在你的jQuery ready函數中：

$(function(){
   var backnum = Math.floor(Math.random()*5);
   $('body').addClass("backgr" + backnum);
});

如果需要，用div的#id替換body。

Answer 2

最好在服務器端執行此操作，在我看來，您使用的是PHP，因此我以該語言為您提供示例。 后台映像僅在重新加載時更改，因此邏輯上差異應該在客戶端從服務器接收的HTML中。

您應該使用@DarthJDG為您提供的相同CSS類。 唯一的區別是您將在服務器上附加類，而不是在客戶端上。

$number_of_classes=7; //the number of background images you have
$which_one=rand(0, $number_of_classes-1); //let's choose a class

printf('<body class="backgr%s">', $which_one); //put this wherever you are printing body

Answer 3

當您嘗試查找是否使用JavaScript或服務器端代碼完成某些操作時，您可以做的第一件事就是完全關閉JavaScript，重新加載頁面幾次，看看會發生什么。

不幸的是，Offliberty默認情況下都是隱形的，所以當沒有JS時它看起來就像一個空白屏幕。 但是，內容仍然存在，所以它仍然有效。

這些大背景圖像正在應用於#wrapper div，當我刷新時 - 即使關閉了JS - 背景圖像也在變化。

所以看起來他們正在使用服務器端的東西來做。

（另外，對於它的價值， Sizzle是一個JavaScript庫，它使選擇元素變得更加容易。它不會為用戶改變任何東西，它只會使開發變得更簡單。）

Answer 4

<div id=wrapper class=wrapper4>在css中找到了20個左右的背景選項。 如果你不想使用php asp或severside代碼。 你可以為此寫一個javascript

document.write ( '<div id=wrapper class=wrapper' + Math.floor(Math.random()*21) + '>');

如何在刷新時更改全屏背景？

問題描述

4 個解決方案

解決方案1
8 2011-04-21 17:47:11

解決方案2
1 2011-04-22 06:34:29

解決方案3
0 2011-04-21 17:58:03

解決方案4
-1 2011-04-21 17:53:34

如何在刷新時更改全屏背景？

問題描述

4 個解決方案

解決方案1 8 2011-04-21 17:47:11

解決方案2 1 2011-04-22 06:34:29

解決方案3 0 2011-04-21 17:58:03

解決方案4 -1 2011-04-21 17:53:34

解決方案1
8 2011-04-21 17:47:11

解決方案2
1 2011-04-22 06:34:29

解決方案3
0 2011-04-21 17:58:03

解決方案4
-1 2011-04-21 17:53:34