随机加载壁纸通过css和html


Randomly load wallpaper via css and html

我是一个新手在css和html甚至编码。我目前正在用本地路径制作自己的起始页,它将我的书签加载到html文件中。背景图像控制通过style.css文件。我在谷歌上搜索了一些解决方案,以创建一个php脚本来加载css和html上的随机图片,我尝试了各种解决方案,但它似乎不适合我。我们开始:

index.html文件,用于传递background-image:

<link rel="stylesheet" href="style.css" type="text/css" />

和style.css:

body {
background-image: url("Wallpaper01.jpg") ;

}

我不知道如何更改,因为我下载了代码。此外,.jpg文件与html和css文件位于同一目录。

有人可以帮助我有一个随机图像与此?请提供代码来做它,插入它的地方,或者任何我需要的,这将帮助很多,而不仅仅是告诉我该做什么。

如果有人能帮助我,非常非常感谢。谢谢!

您可以尝试这样做:

<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.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
?>

CSS(在头部)

<html>
        <head>
            <title></title>
            <style type="text/css">
                <!--
                body{
                background: url(images/<?php echo $selectedBg; ?>) no-repeat;
                }
                -->
            </style>
        </head>
        <body>
             <!-- website -->
        </body>
    </html>

编辑(用户评论)

<?php
          $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.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
?>
        <html lang="en"> 
            <head> 
                <meta charset=utf-8> 
                <link rel="stylesheet" href="style.css" type="text/css" /> 
                <title>Start Page</title> 
                <style type="text/css">
                        <!--
                        body{
                        background: url(images/<?php echo $selectedBg; ?>) no-repeat;
                        }
                        -->
                </style>
            </head>
            <body> 
                <div id="one">01 <div class="title">General</div> 
                <div class="links"> <a href="google.com">Google </a> 
                </div> 
            </div>
            </body>
        </html>