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

基本上，我有一个带有文本的div，我希望背景显示一个不同的图像，这取决于它的月份和年份

我怎样才能做到这一点？ 任何帮助都将非常感激

---

---

*如果有帮助的话，我已经准备了4年的每月图片，标签是“month0_2011.png”到“month11_2014.png”？*

在CSS中添加一个

.php

扩展，并使用php代码来确定。只需使用标准的PHP标记

例如：

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

总而言之：

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

身体
{
背景图像：url（“”）；
}

---

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

您还可以使用JavaScript/jQuery从用户那里获取日期、月份和年份。执行与此处类似的操作：然后使用类似于

if

语句的操作来确定哪个月，然后更改图像的来源。

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

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

var currentTime=新日期（）；
var month=currentTime.getMonth（）；
var day=currentTime.getDate（）；
var year=currentTime.getFullYear（）；
var backgroundpicture=“月”+月+““+年+”.png”；
document.body.background=背景图片；

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

---

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

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

---

在寻找一个解决方案之后，如果找到下面的脚本，这个解决方案实际上是可行的，而且实现起来非常简单。只需将其复制并粘贴到.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" />');
}

var s=新日期（）；
var month=s.getMonth（）；
开关（月）
{
案例0：
文件。写（“”）；
打破
案例1：
文件。写（“”）；
打破
案例2：
文件。写（“”）；
打破
案例3：
文件。写（“”）；
打破
案例4：
文件。写（“”）；
打破
案例5：
文件。写（“”）；
打破
案例6：
文件。写（“”）；
打破
案例7：
文件。写（“”）；
打破
案例8：
文件。写（“”）；
打破
案例9：
文件。写（“”）；
打破
案例10：
文件。写（“”）；
打破
案例11：
文件。写（“”）；
打破
违约：
文件。写（“”）；
}
您如何知道OP正在使用PHP？我没有看到标签。我假设PHP是可用的，因为OP没有声明它不是。抱歉，我正在设计的页面确实是.PHP。我完全是自学成才的，所以我通过反复试验，我从未意识到样式表可以以.css以外的扩展结束。请原谅我的无知，但是根据用户的时钟（特别是月份和年份），我需要设置currentImagePath echo以将其指向我的文件，这需要哪一段php代码？相应的php代码会出现在css文件中还是我想要设置样式的页面中？非常感谢,；你们给我留下了深刻的印象！虽然我对html、css等非常熟悉，但我对php仍处于初级水平。我在10分钟前添加了php代码。：）此外，扩展名可以是.php或.css.php，只要以.php结尾即可。代码应该只在样式表中。谢谢，这看起来很有希望，尽管我已经将main.css文件改为.php扩展名，然后将文件中的源代码改为：
，但是页面现在没有样式。我是否需要在新的maincss.php文件的顶部添加一些内容来告诉它它仍然是一个样式表？我的代码编辑器中的所有颜色编码现在也都显示出来了。
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" />');
}