html背景自动换,html页面换皮肤颜色、背景图片（更换页面背景，常驻缓存）刷新保存...

要实现HTML背景自动换、页面换皮肤颜色和背景图片，可以通过JavaScript和CSS来实现。具体步骤如下：

1. 定义不同的背景颜色和图片资源，可以在CSS文件中定义，如下所示：

/* 定义多个背景颜色 */
body {
  background-color: #f1f1f1; /* 默认背景颜色 */
}

body.blue {
  background-color: #3498db;
}

body.green {
  background-color: #27ae60;
}

/* 定义多个背景图片 */
body {
  background-image: url("bg1.jpg"); /* 默认背景图片 */
}

body.bg2 {
  background-image: url("bg2.jpg");
}

body.bg3 {
  background-image: url("bg3.jpg");
}

2. 使用JavaScript动态切换背景颜色和图片。可以在JavaScript中定义一个函数，用于切换背景颜色和图片，如下所示：

function changeBackground(color, image) {
  // 设置背景颜色
  document.body.style.backgroundColor = color;
  // 设置背景图片
  document.body.style.backgroundImage = "url('" + image + "')";
}

3. 在HTML页面中添加切换按钮。可以在HTML页面中添加按钮，通过点击按钮来触发JavaScript函数，实现背景自动换和页面换皮肤颜色和背景图片。如下所示：

<!-- 切换按钮 -->
<button onclick="changeBackground('#3498db', 'bg2.jpg')">Blue</button>
<button onclick="changeBackground('#27ae60', 'bg3.jpg')">Green</button>

4. 刷新保存。使用本地存储（localStorage）来保存用户选择的背景颜色和图片，以便在下一次打开页面时自动加载。在JavaScript函数中添加本地存储代码，如下所示：

function changeBackground(color, image) {
  // 设置背景颜色
  document.body.style.backgroundColor = color;
  // 设置背景图片
  document.body.style.backgroundImage = "url('" + image + "')";
  // 保存用户选择的背景颜色和图片到本地存储
  localStorage.setItem("color", color);
  localStorage.setItem("image", image);
}

// 页面加载时从本地存储中读取用户选择的背景颜色和图片
window.onload = function() {
  var color = localStorage.getItem("color");
  var image = localStorage.getItem("image");
  if (color && image) {
    changeBackground(color, image);
  }
}

这样就可以实现HTML背景自动换、页面换皮肤颜色和背景图片，并且用户的选择会常驻缓存。