随机CSS背景图片

Alex 发表于 Dev

亚历克斯

我找不到对我有用的任何东西，并且由于我是剪切并粘贴的html编辑器（我只知道主要的基本知识），所以我不了解其他大多数文章。这是我正在使用的网页：http : //goo.gl/MgsoX4（由于尚未完成，所以将其托管在Dropbox上）。我的想法是每次刷新/重新加载页面时都要进行后台更改。我似乎找不到任何适合我的东西。背景的CSS如下：

#banner {
    background-attachment: scroll,                          fixed;
    background-color: #666;
    background-image: url("images/overlay.png"), url("../images/1.jpg");
    background-position: top left,                      center center;
    background-repeat: repeat,                          no-repeat;
    background-size: auto,                          cover;
    color: #fff;
    padding: 12em 0 20em 0;
    text-align: center;
}

每当我将“ ../images/1.jpg”更改为“ ../images/2.jpg”时，背景将更改为第二个jpg，但是我尝试了php图像旋转器，它将无法正常工作！

拉里·莱恩

如果要使用JQuery，可以将此代码粘贴到html页面的开头部分或页面结束标记之前。

我下载了您的文件，并更改了img的文件路径，对我来说效果很好。每次我按f5都会得到一个新的背景图片

     <!-- place in head element or before closing-->  <!-- </body> tag of html page -->



 <!--load JQuery first-->
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

      <script>
$(document).ready(function(){

//the highest number of the image you want to load
var upperLimit = 10;

//get random number between 1 and 10
//change upperlimit above to increase or 
//decrease range
var randomNum = Math.floor((Math.random() * upperLimit) + 1);    


 //change the background image to a random jpg
 //edit add closing )  to prevent syntax error
 $("body").css("background-image","url('images/" + randomNum + ".jpg')");//<--changed path




 });
 </script>