css背景随机切换效果

2023-12-29 18:30:16 举报文章

在网页设计中,背景图片是一个很关键的元素,可以为网页营造出不同的氛围。但是,单一的背景图片会让网页显得乏味,因此我们可以通过CSS来实现背景随机切换的效果。下面我们来看看具体的实现方法。

<html>
  <head>
  
  <style>
  
   
 body {
  
   
   background: url(images/1.jpg) center center fixed no-repeat;
  
   
   background-size: cover;
  
   
}
  
   
  
   
 /* 定义背景图片数组 */
  
   
 var bg = [
  
   
   "url(images/2.jpg)",
  
   
   "url(images/3.jpg)",
  
   
   "url(images/4.jpg)",
  
   
   "url(images/5.jpg)",
  
   
   "url(images/6.jpg)"
  
   
 ];
  
   
  
   
 /* 得到一个0到图片数量之间的随机整数 */
  
   
 var index = Math.floor(Math.random() * bg.length);
  
   
  
   
 /* 应用随机背景图片 */
  
   
 body.style.background = bg[index] + "center center fixed no-repeat";
  
   
 body.style.backgroundSize = "cover";
  
  </style>
  </head>
  <body>
  
  <h1>这是一个随机背景切换的例子</h1>
  </body>
  </html> 

通过上面的代码,我们可以实现随机切换背景的效果。由于我们将背景图片存储到一个数组中,因此每次刷新网页时都会随机选取一个不同的图片作为背景。这样就有助于为网页营造更加生动的氛围。

如果你认为本文可读性较差,内容错误,或者文章排版错乱,请点击举报文章按钮,我们会立即处理!