Разное CSS background-image в зависимости от месяца и года - PullRequest
Новая
       4

Разное CSS background-image в зависимости от месяца и года

5 голосов
/ 03 августа 2011

По сути, у меня есть div с текстом, и я хочу, чтобы фон отображал другое изображение в зависимости от того, какой это месяц и год.

Как мне этого добиться? Любая помощь будет очень ценна!

* Я уже подготовил 4-месячные ежемесячные изображения с пометкой от "month0_2011.png" до "month11_2014.png", если это поможет? *

Ответы [ 6 ]

4 голосов
/ 03 августа 2011

Добавьте расширение .php в CSS и используйте код PHP, чтобы определить это. Просто используйте стандартные теги PHP.

Например: 

body
{
    background-image:url('<?php echo $currentImagePath ?>');
}

Где $currentImagePath - это путь к вашему изображению, определенный заранее (т.е. вверху страницы) с использованием PHP. 

$currentImagePath = $_SERVER['DOCUMENT_ROOT'] . "/css/images/" . "month" . (date("n") - 1) . "_" . date("Y") . ".png";

Собираем все вместе: 

<?php
header("Content-type: text/css");
$currentImagePath = $_SERVER['DOCUMENT_ROOT'] . "/css/images/" . "month" . (date("n") - 1) . "_" . date("Y") . ".png";
?>

body
{
    background-image:url('<?php echo $currentImagePath ?>');
}

Осталось только настроить путь в соответствии с вашей конфигурацией.

2 голосов
/ 03 августа 2011

Вы можете добавить скрипт вверху страницы: 

<script type="text/javascript">

var currentTime = new Date();
var month = currentTime.getMonth(); 
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var backgroundpictture= "month" + month  + "_" + year + ".png";
document.body.background = backgroundpictture;

</script>
0 голосов
/ 26 июля 2013

После траления для решения, которое действительно работало и было действительно простым в реализации, если найти скрипт ниже.Просто скопируйте и вставьте его в файл .js и укажите ссылку на него в теге head: 

var s = new Date();
 var month = s.getMonth();

switch (month)
{
case 0:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/january.css" />');
  break;
case 1:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/february.css" />');
  break;
case 2:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/march.css" />');
  break;
case 3:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/april.css" />');
  break;
case 4:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/may.css" />');
  break;  
case 5:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/june.css" />');
  break;
case 6:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/july.css" />');
  break;
case 7:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/august.css" />');
  break;
case 8:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/september.css" />');
  break;
case 9:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/october.css" />');
  break;
case 10:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/november.css" />');
  break;
case 11:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/december.css" />');
  break;  
default:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/style.css" />');
}
0 голосов
/ 30 апреля 2012

Нет необходимости в JavaScript и специальной обработке CSS. Используйте 

<div style="background-image:url(images/bg-<?php echo date("Y"); ?>);">content</div>
0 голосов
/ 03 августа 2011

Примерно так, используя немного jQuery 

var fullDate = new Date();
var month = fullDate.getMonth();
var year = fullDate.getFullYear();
var img = 'month' + month + '_' + year + '.png';

$('#monthly').css('backgroundImage', img);

Предполагая, что div равно 

<div id="monthly">
</div>
0 голосов
/ 03 августа 2011

Вы также можете использовать JavaScript / jQuery для получения даты, месяца и года от пользователя. Делая что-то вроде того, что они делают здесь: http://arnelbornales.wordpress.com/2009/02/25/get-the-current-date-using-jquery/, затем используя что-то вроде оператора if, чтобы определить, какой месяц, а затем измените источник изображения.

...