使用CSS按日期更改元素 - Change element by date with CSS

Change element by date with CSS

本文关键字：元素日期 CSS 使用 | 更新日期: 2023-09-27

我正在考虑在主页背景中使用一个大图像，并希望该图像每天都能更改，只使用CSS。很明显，我会有一组图片需要调用，但还不确定如何调用。不过，如果他们能循环通过，那就太好了。

在24小时循环中使用精灵并移动位置值得吗？我相信有一个更干净的方法。。。

非常感谢！

您不能仅使用CSS来实现这一点。

当然，你可以创建24个课程，每小时（或每天，或任何你喜欢的）一个，每个课程都有一个单独的图像背景：

.hour01 { background:url('image-01.png'); }
.hour02 { background:url('image-02.png'); }

等等。。。。

但是，您需要一种服务器端语言（如PHP）或客户端语言（javascript）来检查日期/时间，并在此基础上切换body元素的CSS类。

你不能只在css中这样做，但如果你添加一些js，这是可行的：

today = new Date(); // will return 1,2,...,7 correpsonding to week days
if (today.getDay()  === 1){
     document.getElementById("background").className += 'mondayStyle';
}
if (today.getDay()  === 2){
     document.getElementById("background").className += 'tuersdayStyle';
}
...

编辑：

如果你没有7张图片（但少于30张），你可以做：

var nbOfImages = 12;
numDay = (today.getDate())% nbOfImages;  // day of the month modulus nbOfImages
if (numDay  === 1){
     document.getElementById("background").className += 'tuersdayStyle';
}
...