HTML 中的随机图像背景
Random image background in HTML
我想要每次刷新页面时随机更改的完整背景。我的页面在 HTML 中,包含 CSS 和 JS(包括 JQuery)。
我已经从这个网站和许多其他网站尝试过很多解决方案,他们是我知道的很多教程。但我认为我做错了什么,因为没有任何功能。
<!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>
我在同一个文件夹中有 13 个背景,bg01.jpg bg02.jpg bg03.jpg ...
我不明白如何在 css 部分替换我的 url,在哪里添加 JS 等...
Noobie 话题,我很抱歉,但我没有找到适合我的 tuto
您可以使用普通的 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";
}
我想要每次刷新页面时随机更改的完整背景。我的页面在 HTML 中,包含 CSS 和 JS(包括 JQuery)。 我已经从这个网站和许多其他网站尝试过很多解决方案,他们是我知道的很多教程。但我认为我做错了什么,因为没有任何功能。
<!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>
我在同一个文件夹中有 13 个背景,bg01.jpg bg02.jpg bg03.jpg ... 我不明白如何在 css 部分替换我的 url,在哪里添加 JS 等... Noobie 话题,我很抱歉,但我没有找到适合我的 tuto
您可以使用普通的 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";
}