HTML中的随机图片背景

问题描述 投票:-1回答:2

我希望每次刷新页面时都会随机更改整个背景。我的页面是带有CSS和JS(包括JQuery)的HTML。我已经在该网站和许多其他网站上尝试了很多解决方案,它们是我知道的很多教程。但是我认为我做错了,因为没有任何功能。

   <!DOCTYPE html>
   <html lang="fr">
     <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>index</title>
       <script src="js/jquery-3.3.1.min.js"></script>
       <script src="js/popper.min.js"></script> 
       <script src="js/bootstrap-4.3.1.js"></script>

       <!-- Bootstrap -->
       <link href="css/bootstrap-4.3.1.css" rel="stylesheet">
       <style type="text/css">
       body {
    background: url(images/BG/bg01.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
       a:link {
       color: #000000;
   }
   a:hover {
       color: #000000;
   }
       </style>

我在名为bg01.jpg bg02.jpg bg03.jpg的同一文件夹中有13个背景...我不明白如何在我的css部分中替换我的网址,在哪里添加JS等...Noobie主题,对此感到抱歉,但我找不到为我工作的tuto

javascript html css random background
2个回答
1
投票

您可以为此使用纯JavaScript。只需生成一个随机数并设置背景即可。

function randomBackground(){
    var num=Math.floor(Math.random()*13); // will generate a random number between 0 and 12
    num++;
    if(num.length==1) num='0'+num;
    document.body.style.background="url('images/BG/bg"+num+".jpg')"; // for images: bg01.jpg, bg02.jpg, bg03.jpg, ... bg13.jpg
}

0
投票

我认为您可以尝试一些简单的操作,例如在php中更改背景

      body {
    background: url(images/BG/
<?php $myRand = rand();
  $img;
  if ($myRand < ...) {
    $img = "bg01.jpg";
  } else if ($myRand < ...) {
    $img = "bg02.jpg";
  } else ...
  echo $img;
?>) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
© www.soinside.com 2019 - 2024. All rights reserved.