Random CSS background image

问题

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;
}

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!

回答1:

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.

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>

回答2:

The issue you're having is that you're trying to define the image inside of the stylesheet. In order to create a random background image, it will have to be attached as an inline style.

Keep the css how you currently have it for a fallback. You would then have the div look something like this:

<div id="banner" style="background-image:url("images/newImage.jpg");"></div>

@Steve-Sanders comment is also correct in that you will need an actual server to run PHP.

回答3:

Inside of your PHP page, inside of the head tag, you could alter the #banner style. Because CSS is cascading, doing this will override anything inside of your external style sheet

my_style_sheet.css

#banner {
    background-attachment: scroll,                          fixed;
    background-color: #666;
    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;
}

my_page.php

<head>
  <link rel="stylesheet" type="text/css" href="my_style_sheet.css" />
  <style type="text/css">
  #banner {
      background-image: url('images/<?php echo rand(0, 5); ?>.jpg');
  }
  </style>

Javascript example

...
<div id="banner"></div>
<script type="text/javascript">
document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>

回答4:

It won't work, unless your page is in PHP. You need to use javascript/ajax instead to rotate the images.

回答5:

PHP requires a server that can execute the code. Dropbox doesn't execute the code because it isn't supposed to. Instead it just serves the html the way it was uploaded, if you check the DOM you will see the php tags. When served by a proper server that executes php the tags are removed.

Edit: change the html file's extension to "php" so that it looks like "index.php"

回答6:

A simple solution to this could be,

before doctype

<?php
    $bgimage = array('originals/background-01.png', 'originals/background-02.png', 'originals/background-03.png', 'originals/background-04.png', 'originals/background-05.png', 'originals/background-06.png'); 
    $i = rand(0, count($bgimage)-1); 
    $mybgimage = "$bgimage[$i]";
?>

and inside style call

background: url(images/<?php echo $mybgimage; ?>) no-repeat;

来源：https://stackoverflow.com/questions/26682838/random-css-background-image

标签

php

html

css

background

rotator