css3随机背景图

CSS3在背景图方面新增了很多有趣的特性，其中一个就是随机背景图。随机背景图可以让网站看起来更加有活力和新鲜感，下面我们来了解一下如何实现随机背景图。

/* 随机背景图 */
function getRandomImage(){
  var images = ['bg1.jpg','bg2.jpg','bg3.jpg']; // 存储背景图的文件名
  var size = images.length;
  var x = Math.floor(size * Math.random());
  var element = document.getElementById('background'); //获取要设置背景的元素
  element.style.backgroundImage = "url('img/" + images[x] + "')"; // 设置随机背景图
}

以上代码是一个简单的JavaScript函数，其中包含三张背景图文件名。我们首先获取这些文件名的大小，然后使用JavaScript中的Math.random()方法来获取0到1之间的随机数，再用Math.floor()方法将其转换为整数。然后我们将获取到的整数作为数组索引，从背景图文件名数组中获取一个随机元素，最后将其设置为背景图。

接下来我们可以为元素添加一个事件监听器，使其在页面加载时调用'getRandomImage()'函数：

window.onload = function(){
  getRandomImage();
}

现在我们已经成功地实现了CSS3随机背景图。如果你想要改变背景图，请将images数组中的文件名修改为你自己的文件名，然后尽情享受随机背景图带来的乐趣吧！