css随机背景图

实现随机背景图的方法有很多，这里介绍一种使用 CSS 实现的方法：

1. 首先，准备好多张背景图片，并将它们命名为 `bg1.jpg`, `bg2.jpg`, `bg3.jpg` 等等。

2. 在 CSS 文件中定义一个类，比如 `.random-bg`，并设置其背景图片为其中一张图片。

   .random-bg {
     background-image: url('bg1.jpg');
   }

3. 使用 JavaScript 生成一个随机数，用来决定要显示哪张图片。

   var randomNum = Math.floor(Math.random() * numOfImages) + 1;

4. 将随机数插入到 CSS 类名中，并将其添加到 HTML 元素上。

   var bgClass = 'bg' + randomNum;
   document.body.classList.add(bgClass);

这样，每次页面加载时，都会随机选择一张背景图片作为页面的背景。

完整的 CSS 代码可能像这样：

   .bg1 {
     background-image: url('bg1.jpg');
   }
   
   .bg2 {
     background-image: url('bg2.jpg');
   }
   
   .bg3 {
     background-image: url('bg3.jpg');
   }
   
   /* ... */
   
   .bg10 {
     background-image: url('bg10.jpg');
   }
   
   .random-bg {
     transition: background-image 0.5s ease-in-out;
   }

完整的 JavaScript 代码可能像这样：

   var numOfImages = 10;
   var randomNum = Math.floor(Math.random() * numOfImages) + 1;
   var bgClass = 'bg' + randomNum;
   document.body.classList.add(bgClass);