javascript - 带有背景覆盖的随机背景？

Question

您好，我正在尝试使用叠加层随机化我的网站背景，但我在显示随机化背景时遇到了问题。

这就是我的工作

.css/.php

#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;


	}

<?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
?>

我已经检查了 bg-01.png、bg-02.jpg 的文件名并且是正确的。如果我做错了什么，将不胜感激。

Answer 1

将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>