css 如何实现随机背景图

CSS 实现随机背景图功能非常简单，我们只需要准备好多张需要随机展示的图片，然后使用 CSS 属性 background-image 来将不同的图片设置为背景就行了。下面就是实现随机背景图的 CSS 代码。

    body {
            background-image: url("图片1.jpg");
 /* 设置默认背景图 */    }
            /* JavaScript 生成随机数 */    var randomNum = Math.floor(Math.random()*4+1);
 /* 生成 1-4 的随机整数 */        /* 根据随机数设置不同的背景图 */    body {
        if(randomNum == 1) {
                background-image: url("图片1.jpg");
        }
 else if(randomNum == 2) {
                background-image: url("图片2.jpg");
        }
 else if(randomNum == 3) {
                background-image: url("图片3.jpg");
        }
 else {
                background-image: url("图片4.jpg");
        }
    }
    

通过将多张背景图片添加到 CSS 样式表中，我们可以通过 JavaScript 代码生成随机数，从而选择不同的背景图片来显示。这样页面每次加载时都会显示一个随机的背景图片，增加了网站的趣味性和用户体验。

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