html如何实现浏览器窗口改变背景图片随之更换

可以通过 JavaScript 监听窗口大小变化事件 `resize`，然后在事件处理程序中获取当前窗口大小，根据窗口大小选择相应的背景图片进行更换。具体实现方法如下：

1. 在 HTML 中添加一个 `div` 元素作为背景容器，并设置其样式为固定宽高和背景图片。

<div id="bg-container" style="width: 100%; height: 100%; background-image: url('bg1.jpg');"></div>

2. 在 JavaScript 中定义一个函数，用于根据窗口大小选择不同的背景图片进行更换。

function changeBg() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  var bgUrl = '';

  if (width >= 1024 && height >= 768) {
    bgUrl = 'bg1.jpg';
  } else if (width >= 768 && height >= 576) {
    bgUrl = 'bg2.jpg';
  } else {
    bgUrl = 'bg3.jpg';
  }

  var bgContainer = document.getElementById('bg-container');
  bgContainer.style.backgroundImage = 'url(' + bgUrl + ')';
}

3. 在页面加载时调用一次 `changeBg()` 函数，以便初始化背景图片。

window.onload = function() {
  changeBg();
};

4. 监听窗口大小变化事件 `resize`，并在事件处理程序中调用 `changeBg()` 函数，以便根据窗口大小更换背景图片。

window.addEventListener('resize', function() {
  changeBg();
});