css3随机背景图（css随机背景颜色）

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数组中的文件名修改为你自己的文件名，然后尽情享受随机背景图带来的乐趣吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！