如何在刷新时更改全屏背景？
[英]How do I make a full screen background change on refresh?
问题描述
I want to make the background image of this web page alternate pictures on refresh. 
我想在刷新时将此网页的背景图片替换为备用图片。
How could I accomplish this? 我怎么能做到这一点？
Offliberty does this. Offliberty这样做。 I've looked at the source code but can't quite figure it out. 我查看了源代码，但无法弄明白。 I found out that it's done with server side scripting and my host does support that, and that a script called sizzle is powering the Offliberty website but I'm just so confused when I look at the code. 我发现它是用服务器端脚本完成的，而我的主机确实支持它，并且一个名为sizzle的脚本正在为Offliberty网站提供支持，但是当我查看代码时我感到很困惑。
4 个解决方案
解决方案1
8 2011-04-21 17:47:11
You could easily do this on the client side as well if you want. 如果您愿意，您也可以在客户端轻松完成此操作。 Create multiple classes in your css: 在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'); }
Then in your jQuery ready function: 然后在你的jQuery ready函数中：
$(function(){
var backnum = Math.floor(Math.random()*5);
$('body').addClass("backgr" + backnum);
});
Replace body with an #id of a div if needed. 如果需要，用div的#id替换body。
解决方案2
1 2011-04-22 06:34:29
It would be best to do this on the server side, it seems to me you're using PHP, so I give you an example in that language. 最好在服务器端执行此操作，在我看来，您使用的是PHP，因此我以该语言为您提供示例。 The background-image changes only on reload, so logically the difference should be in the HTML the client receives from the server. 后台映像仅在重新加载时更改，因此逻辑上差异应该在客户端从服务器接收的HTML中。
You should use the same CSS classes that @DarthJDG has provided for you. 您应该使用@DarthJDG为您提供的相同CSS类。 The only difference is that you will attach the classes on the server, and not on the client side. 唯一的区别是您将在服务器上附加类，而不是在客户端上。
$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
解决方案3
0 2011-04-21 17:58:03
When you're trying to find out if something is done with JavaScript or server-side code, the first thing you can do is turn off JavaScript entirely, reload the page a few times, and see what happens. 当您尝试查找是否使用JavaScript或服务器端代码完成某些操作时，您可以做的第一件事就是完全关闭JavaScript，重新加载页面几次，看看会发生什么。
Unfortunately, Offliberty has everything invisible by default, so it just looks like a blank screen when there's no JS. 不幸的是，Offliberty默认情况下都是隐形的，所以当没有JS时它看起来就像一个空白屏幕。 However, the content is all still there , so it'll still work. 但是，内容仍然存在 ，所以它仍然有效。
Those big background images are being applied to the #wrapper div, and when I refreshed - even with JS turned off - that background image was changing. 这些大背景图像正在应用于#wrapper div，当我刷新时 - 即使关闭了JS - 背景图像也在变化。
So it looks like they're using server-side stuff to do it. 所以看起来他们正在使用服务器端的东西来做。
(Also, for what it's worth, Sizzle is a JavaScript library that makes selecting elements much easier. It doesn't change anything for the user, it just makes development a little simpler.) （另外，对于它的价值， Sizzle是一个JavaScript库，它使选择元素变得更加容易。它不会为用户改变任何东西，它只会使开发变得更简单。）
解决方案4
-1 2011-04-21 17:53:34
<div id=wrapper class=wrapper4> there are 20 or so background options found in the css. <div id=wrapper class=wrapper4>在css中找到了20个左右的背景选项。 If you dont want to use php asp or severside code. 如果你不想使用php asp或severside代码。 you can write a javascript for this 你可以为此写一个javascript
document.write ( '<div id=wrapper class=wrapper' + Math.floor(Math.random()*21) + '>');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.