Javascript 随机背景与背景叠加？

嗨，我正试图用覆盖图随机显示我的网站背景，但我在显示随机背景时遇到了问题

这就是我的工作

.css/.php

#简介{
背景：
/*顶部，透明黑色渐变*/
线性梯度(
rgba（0,0,0,0.7），
rgba（0,0,0,0.7）
),
/*底部，图像*/
网址（/images/）；
背景尺寸：100%自动，封面；
背景附件：固定，固定；
背景位置：左上、中下；
背景重复：重复，不重复；
宽度：100%；
高度：自动；
}

---

将Css和php代码保存在一个文件中，并在Css之后首先加载php代码

<?php
      $bg = array('bg-01.png', 'bg-02.jpg' ); // array of filenames

      $i = rand(0, count($bg)-1); // generate random number size of the array
      $selectedBg = "$bg[$i]"; // set variable equal to which random filename was  chosen
?>

<style> 
     #intro {
        background:
          /* top, transparent black gradient */ 
      linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)

 ),
 /* bottom, image */

        url(/images/<?php echo $selectedBg; ?>);
        background-size: 100% auto, cover;
        background-attachment: fixed, fixed;
        background-position: top left, bottom center;
        background-repeat: repeat, no-repeat;
        width: 100%;
        height: auto;


    }

 </style>

#介绍{
背景：
/*顶部，透明黑色渐变*/
线性梯度(
rgba（0,0,0,0.7），
rgba（0,0,0,0.7）
),
/*底部，图像*/
网址（/images/）；
背景尺寸：100%自动，封面；
背景附件：固定，固定；
背景位置：左上、中下；
背景重复：重复，不重复；
宽度：100%；
高度：自动；
}

无论如何，你为什么要使用php来实现这一点？当组合css和php时，非常讨厌的编码方式

javascript对此更加干净

<script type="text/javascript">
$(document).ready(function() {
    var bgList = ['bg-01.png', 'bg-02.png'];
    var bg = bgList[Math.floor(Math.random() * bgList.length)];

    $('#intro').css('background', bg);

    var path = '/images/';
    $('#intro').css('background', path+bg);
}); 
</script>  

$（文档）.ready（函数（）{
变量bgList=['bg-01.png'，'bg-02.png']；
var bg=bgList[Math.floor（Math.random（）*bgList.length）]；
$（'intro'）.css（'background'，bg）；
变量路径='/images/'；
$（'intro'）.css（'background'，path+bg）；
}); 

CSS文件是否有.php扩展名？就像在style.css.php中一样？背景什么时候改变？页面加载？用户点击按钮？日常基础？如果有变化，就会有一个事件。在页面加载时，因此每次加载网站时，都会显示不同的背景。谢谢