HTML中的随机图像背景[重复]

Question

这个问题在这里已经有了答案：

在页面刷新时随机更改 HTML 背景3 个答案

1 年前关闭。

我希望每次刷新页面时都会随机更改完整的背景。 我的页面在 HTML 中，带有 CSS 和 JS（包括 JQuery）。 我已经尝试了这个网站和许多其他网站的很多解决方案，我知道他们有很多教程。 但我认为我做错了什么，因为没有 function。

   <!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 部分中替换我的 url，在其中添加 JS 等... Noobie 主题，我很抱歉，但我没有找到为我工作的tuto

Answer 1

为此，您可以使用普通的 JavaScript。 只需生成一个随机数并设置背景。

function randomBackground(){
    var num = Math.floor(Math.random() * 13) + 1; // will generate a random number between 0 and 12
    if(num.toString().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
    document.body.style.backgroundPosition = "center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
}