Случайное CSS фоновое изображение
Я не могу найти ничего, что работает для меня, и, поскольку я работаю с редактором 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, вы можете вставить этот код в раздел head вашей 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>
Другие решения
Проблема в том, что вы пытаетесь определить изображение внутри таблицы стилей. Чтобы создать случайное фоновое изображение, оно должно быть прикреплено как встроенный стиль.
Сохраните CSS, как у вас есть в настоящее время для резервного. Затем у вас будет div выглядеть примерно так:
<div id="banner" style="background-image:url("images/newImage.jpg");"></div>
@ Комментарий Стива-Сандерса также верен в том смысле, что вам понадобится реальный сервер для запуска PHP.
Внутри вашей страницы PHP, внутри head тег, вы можете изменить #banner стиль. Поскольку CSS является каскадным, выполнение этого переопределит все, что находится внутри вашей внешней таблицы стилей
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
...
<div id="banner"></div>
<script type="text/javascript">
document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>
Это не будет работать, если ваша страница не на PHP. Вам нужно использовать javascript / ajax вместо того, чтобы вращать изображения.
PHP требует сервера, который может выполнять код. Dropbox не выполняет код, потому что он не должен. Вместо этого он просто обслуживает HTML так, как был загружен, если вы проверите DOM, вы увидите теги php. При обслуживании надлежащим сервером, который выполняет php, теги удаляются.
Изменить: изменить расширение файла HTML на «php», чтобы он выглядел как «индекс».PHP«
Простое решение этого может быть,
до доктайпа
<?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]";
?>
и внутри стиль вызова
background: url(images/<?php echo $mybgimage; ?>) no-repeat;