随机CSS背景图片 [英] Random CSS background image

问题描述

我找不到任何适合我的东西，因为我是一个剪切和粘贴html编辑器（我知道只有主要的基本东西），我不明白大多数其他职位。这是我使用的网页： http://goo.gl/MgsoX4 （我托管它因为我还没有完成它）。我有一个想法，每当一些刷新/重新加载页面后背景变化。我似乎找不到任何对我有用的东西。背景的CSS如下：

I can't find anything that works for me, and since I'm a cut and paste html editor (I know only the main basic stuff), I don't understand most of the other posts. This is the webpage I'm working with: http://goo.gl/MgsoX4 (I'm hosting it on dropbox because I haven't finished it yet). I had the idea of having a background change every time some refreshed/reloaded the page. I can't seem to find anything that works for me. The CSS for the background is the following:

#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图像旋转器，它不会工作！

Whenever I change "../images/1.jpg" to "../images/2.jpg", the background will change to the second jpg, but I've tried a php image rotator and it won't work!

推荐答案

如果你想使用JQuery，你可以将这段代码粘贴到html页面的head部分或者你的页面的结束标记之前。

If you want to use JQuery you can paste this code in the head section of your html page or just before the closing tag of your page.

我下载您的文件，并更改了img的文件路径，它对我工作很好。每次我点击f5就会得到一个新的背景图片

I dowloaded your files and changed the file path for the img and it worked fine for me. everytime I hit f5 you will get a new background image

     <!-- 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>

这篇关于随机CSS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！