不同的CSS背景图像取决于月份和年份

时间:2011-08-03 13:58:27

标签: php css date background-image

基本上,我有一个包含文本的div,我希望背景显示不同的图像,具体取决于它的月份和年份。

我怎样才能做到这一点? 任何帮助都会受到极大的关注!


*如果有帮助的话,我已经准备了4个月的月度图片,标记为“month0_2011.png”至“month11_2014.png”吗?*

6 个答案:

答案 0 :(得分:4)

向CSS添加.php扩展名并使用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 ?>');
}

剩下的就是调整路径以适应您的配置。

答案 1 :(得分:2)

您可以在页面顶部添加脚本:

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

答案 2 :(得分:0)

您还可以使用JavaScript / jQuery从用户那里获取日期,月份和年份。做他们在这里做的事情:http://arnelbornales.wordpress.com/2009/02/25/get-the-current-date-using-jquery/然后使用类似if语句的内容来确定哪个月然后更改图像的来源。

答案 3 :(得分:0)

使用一些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>   

答案 4 :(得分:0)

无需任何javascript和特殊的css处理..使用

<div style="background-image:url(images/bg-<?php echo date("Y"); ?>);">content</div>

答案 5 :(得分:-1)

在搜索实际工作的解决方案之后,如果找到下面的脚本,实现起来非常简单。只需将其复制并粘贴到.js文件中,然后在头标记中链接到该文件:

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" />');
}