根据星期几更改背景图像 [英] Changing the background image based on the day of the week

问题描述

我正在尝试根据星期几更改 div 的背景图像.图像位于名为img"的文件夹中，我有以下代码；

html

<div class="jumbotron indx-BG">//内容

css(外部样式表)

.indx-BG {背景: url('../img/<?php echo $image_for_today ?>.jpg') 不重复居中；}

解决方案

最好在 css 文件中定义七个具有不同背景图像的不同类，然后使用 php 文件在元素中应用这些类.

喜欢:

//内容

并且在您的 css 文件中您定义了 css 类，例如:

.monday-bg {背景: url('../img/image_for_monday.jpg') 无重复中心；}.tuesday-bg {背景: url('../img/image_for_tuesday.jpg') 不重复居中；}....sunday-bg {背景: url('../img/image_for_sunday.jpg') 不重复居中；}

I am trying to change a div's background image based on the day of the week. The images are in a folder named 'img' I have the following code;

html

<?php
  $images_by_day = array('monday.jpg', 'tuesday.jpg', 'wednesday.jpg',  ...);
  $image_for_today = $images_by_day[date('w')];
?>

<div class="jumbotron indx-BG">
   //content
</div>

css (external style sheet)

.indx-BG {
  background: url('../img/<?php echo $image_for_today ?>.jpg') no-repeat center center;
 }

解决方案

Its better you define seven different classes with different background images within the css file and then apply those classes within the elements using php file.

Like:

<div class="container <?php echo date('l')?>-bg" id="indx-jumbo">
   //content
</div>

And in your css file you define css classes like:

.monday-bg {
  background: url('../img/image_for_monday.jpg') no-repeat center center;
}
.tuesday-bg {
  background: url('../img/image_for_tuesday.jpg') no-repeat center center;
}
.
.
.
.sunday-bg {
  background: url('../img/image_for_sunday.jpg') no-repeat center center;
}

这篇关于根据星期几更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！