二、网页换肤 background-size: cover; 记得设置背景大小为cover 整个页面中 有一个有序列表 列表中有5个li 点击对应的li 网页会展示对应的背景（整个界面更换背景图） 被点击的li文字颜色和背景颜色进行相应的变化

"网页换肤"通常是指通过用户交互改变网站的主题样式，例如更改背景图片和配色方案。CSS属性`background-size: cover`的作用是让背景图片完全填充其容器，并保持宽高比缩放，适合作为背景图应用。

要实现在一个有序列表里点击切换背景并相应改变文字颜色的功能，可以这样做：

1. 首先，在HTML结构中，创建一个包含五个`<li>`元素的`<ol>`，每个`<li>`都有一个唯一的ID或class，以及初始的文字颜色和默认的背景图链接：

<ol id="skinList">
  <li id="bg1" class="active">内容1</li>
  <li id="bg2">内容2</li>
  <!-- 添加其他li... -->
</ol>

2. 使用JavaScript或者jQuery来监听`<li>`的点击事件，获取当前选中的`li`元素：

$(document).ready(function() {
  $('#skinList li').click(function(e) {
    e.preventDefault(); // 阻止默认的列表滚动效果

    // 获取当前点击的li元素
    var clickedLi = $(this);
    // 更改背景图及文字颜色
    changeSkin(clickedLi);
  });
});

3. 创建一个函数`changeSkin()`，接收`li`元素，更新背景和颜色：

function changeSkin(element) {
  // 设置背景图片
  element.css('background-image', 'url(' + element.data('bg') + ')');
  
  // 根据需求设置背景大小为cover
  element.css('background-size', 'cover');

  // 文字颜色变化
  element.css('color', contrastColor(element.css('background-color'))); // 可能需要自定义计算对比色的函数
  
  // 使点击过的li变为激活状态
  element.siblings().removeClass('active');
  element.addClass('active');
}

// 示例：假设data-bg属性存储了背景图片URL
// data-color属性存储了文字颜色，或者可以用CSS变量动态设置

4. 最后，记得为每个`li`元素添加`data-bg`和`data-color`数据属性，用于存储对应的背景图片和文字颜色。