如何用JavaScript根据时段设置动态切换的页面背景图片？

我在HTML里加了id为image_1的<img>标签，已经用JavaScript写好了根据时段切换三张图片的逻辑，但现在想把这些图片设为页面背景。试了用DOM操作background属性，也试了CSS设置背景图片，都没效果，图片始终不显示。

核心修改思路 #

• 无需保留原<img>标签，直接通过JS操作body的背景样式即可
• 必须给背景图片设置配套CSS属性，确保图片铺满页面且显示正常

具体修改方案 #

1. 清理HTML冗余代码

移除原来的<img src="" alt="" id="image_1" />标签，它已经不需要了。

2. 补充基础CSS样式

在Clock.css中添加背景相关样式，保证图片全屏显示：

body {
  margin: 0;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 可选：给文字添加阴影，避免被背景覆盖 */
#greeting, #txt {
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
  padding: 20px;
  font-size: 2rem;
}

3. 修改JavaScript逻辑

把设置img.src的代码替换为设置body的backgroundImage属性，注意格式要符合CSS语法：

const greeting = document.getElementById("greeting");
const welcomeTypes = ["Good Morning", "Good Afternoon", "Good evening"];
const hour = new Date().getHours();

function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

let welcomeTxt = "";
if (hour < 12) welcomeTxt = welcomeTypes[0];
else if (hour <= 18) welcomeTxt = welcomeTypes[1];
else welcomeTxt = welcomeTypes[2];
greeting.innerHTML = welcomeTxt;

const day = new Date();
const today = parseInt(day.getDay());
const hours = parseInt(day.getHours());
const minutes = parseInt(day.getMinutes());

// 核心修改：直接设置body背景图片
(function () {
  let bgImageUrl = "";
  if (today >= 0 && today <= 6) {
    if (hours < 12) {
      bgImageUrl = "https://media.istockphoto.com/id/1332712244/photo/sunrise-over-misty-fields-of-corn.jpg?s=612x612&w=0&k=20&c=Ahdwy0nHLDDxMPA5Q9D6bUBykhjixiqVWFvsiX9E6aE=";
    } else if (hours <= 18) {
      bgImageUrl = "https://media.istockphoto.com/id/141467949/photo/beach-at-bamburgh-northumberland-uk.jpg?s=612x612&w=0&k=20&c=5kfMaNJIVWffH629lmkxjt6uXx58fQyxPtf2w4rhhs8=";
    } else {
      bgImageUrl = "https://media.istockphoto.com/id/1432902897/photo/the-star-shines-on-the-christmas-eve-of-jesus-christ.jpg?s=612x612&w=0&k=20&c=DLHO1CgZ8yqwy2S5hx_jopHOSh6OE_ew0oZUxW1ivmo=";
    }
  }
  document.body.style.backgroundImage = `url('${bgImageUrl}')`;
})();

4. 修改后的完整HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Clock & Greeting</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="Clock.css" />
  </head>
  <body onLoad="startTime();">
    <div id="greeting"></div>
    <div id="txt"></div>
    <script src="Clock.js" async defer></script>
  </body>
</html>

之前方法无效的原因 #

• 直接操作background属性时，可能缺少size、position等关键参数，导致图片无法正常显示
• 原<img>标签与页面背景是独立元素，修改img.src不会影响背景样式
• 用CSS设置背景时，可能存在路径错误、样式优先级不足或未设置min-height导致背景无法铺满页面的问题

内容的提问来源于stack exchange，提问作者Lorins__Web