css 随机背景图

CSS随机背景图是一种很有趣的Web前端技术，它可以让网站每次打开时的背景图片都是随机的，增强了用户的视觉体验。那么在CSS中如何实现随机背景图呢？本文将为您介绍简单易用的实现方法。

css 随机背景图

首先，我们需要先准备好多张背景图片。这里我们以三张图片为例。

background-image: url(bg1.jpg);
background-image: url(bg2.jpg);
background-image: url(bg3.jpg);

接着，我们可以使用 CSS3 中的伪类选择器 :nth-child 来设置不同的背景图片。为每个 <body> 元素添加一个伪类选择器，如下所示：

body:nth-child(1) {
  background-image: url(bg1.jpg);
}
body:nth-child(2) {
  background-image: url(bg2.jpg);
}
body:nth-child(3) {
  background-image: url(bg3.jpg);
}

这样就可以在三张背景图中随机切换了。然而，这样做有一个缺点，那就是如果我们需要增加或减少背景图片的话，就需要对 CSS 代码进行对应更改。这明显不太方便，那么我们可以使用JavaScript来实现随机背景图的功能。

// 背景图数组
var bgImages = [
  'bg1.jpg','bg2.jpg','bg3.jpg'
];

// 获取body元素
var body = document.getElementsByTagName('body')[0];

// 随机数组元素
var bgIndex = Math.floor(Math.random() * bgImages.length);

// 设置背景图片
body.style.backgroundImage = 'url(' + bgImages[bgIndex] + ')';

简单来说，这段 JavaScript 代码将数组 bgImages 中的背景图随机显示在 <body> 元素中。

现在，您已经掌握了 CSS 随机背景图的几种实现方法。在使用时，可以根据不同的场景，选择不同的方法来达到最佳效果。

相关推荐