今晚我要做的是让我的网站在您每次刷新页面时加载随机背景图片。
在这个元素的早期，我试图让我的背景与窗口大小和屏幕分辨率交互，比如 this website (for example) , 并成功了(你可以在嵌入式样式表的“html,body”选择器中看到我的代码)。
那时候我只用了background1.jpg；现在我想在几个之间随机切换。我在 title 标签下面添加了脚本，我也用一些脚本替换了 body 标签。这就是我现在正在使用的。
如果我从我的样式表中删除与背景相关的 Material ，我成功地随机化了背景，但格式丢失了，这是 Not Acceptable 。如果我像你在这里看到的那样保留它，我会保留格式，但不会随机化。我也想吃我的蛋糕。我遇到了困难，非常感谢任何帮助。
<head>
<title>Welcome to Cuhteekaloo!</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
var bgRand = Math.round(Math.random() * 5)
bgOpt = new Array(6);
bgOpt[0] = "background1.jpg";
bgOpt[1] = "background2.jpg";
bgOpt[2] = "background3.jpg";
bgOpt[3] = "background4.jpg";
bgOpt[4] = "background5.jpg";
bgOpt[5] = "background6.jpg";
var bgCurr = bgOpt[bgRand];
</SCRIPT>
<link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
<link rel="icon" type="image/jpg" href="jack.jpg"/>
<style type="text/css">
html,body {margin:0; padding:0; height:100%; overflow-y:hidden;
background: url(background1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
body {color:white;}
img {border:3px white solid;}
p {text-align:justify;}
a:link, a:visited {color:white;}
a:hover, a:active {color:orange;}
.center {text-align:center; display:block;}
</style>
</head>
<script language="JAVASCRIPT">
document.write('<body background="' + bgCurr + '" text="white">')
</script>
最佳答案
我讨厌小但大的问题妨碍你完成一个伟大的元素。
首先，问题出在背景转换器和随机发生器上。
随机发生器的问题是您将 bgRand 设置为变量，这意味着它在页面加载开始时加载一次。试着让它成为一个函数:
var bgRand = function(){return Math.round(Math.random() * 5);}
bgOpt = new Array(6);
bgOpt[0] = "background1.jpg";
bgOpt[1] = "background2.jpg";
bgOpt[2] = "background3.jpg";
bgOpt[3] = "background4.jpg";
bgOpt[4] = "background5.jpg";
bgOpt[5] = "background6.jpg";
var bgCurr = bgOpt[bgRand()];
下一个问题是如何设置背景。您可以更轻松地做到这一点，并使您的“蛋糕”更加美味。试试这段代码:
document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";
现在可以随意编写 ID 为“body”的 body 标签。像这样:
<body id="body">
最后我给你一把 fork 吃你的蛋糕(又名复制和粘贴源代码):
<head>
<title>Welcome to Cuhteekaloo!</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
var bgRand = function(){return Math.round(Math.random() * 5);}
bgOpt = new Array(6);
bgOpt[0] = "background1.jpg";
bgOpt[1] = "background2.jpg";
bgOpt[2] = "background3.jpg";
bgOpt[3] = "background4.jpg";
bgOpt[4] = "background5.jpg";
bgOpt[5] = "background6.jpg";
var bgCurr = bgOpt[bgRand]();
document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";
</SCRIPT>
<link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
<link rel="icon" type="image/jpg" href="jack.jpg"/>
<style type="text/css">
html,body {margin:0; padding:0; height:100%; overflow-y:hidden;
background-image: url(background1.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
body {color:white;}
img {border:3px white solid;}
p {text-align:justify;}
a:link, a:visited {color:white;}
a:hover, a:active {color:orange;}
.center {text-align:center; display:block;}
</style>
</head>
<body id="body">
希望这对您有所帮助!
关于javascript - 如何在嵌入式样式表中使用 javascript 变量作为背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21493369/