我希望使这个随机生成数组的图像一个'背景图像'，因为我想要这些图像的属性(最重要的是，我希望图像的高度始终是浏览器的大小。)我不知道我会如何使用css/html做到这一点，我不知道如何调用这个函数在我的脚本中的背景图像-任何想法或建议如何做到这一点?
script/html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link href="css/uikit.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<script type="text/javascript">
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
</script>
</head>
<body>
<div id="wrapper">
<div id="welcomeImage" class="fadeout">
<!-- This script segment displays an image from the array -->
<script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</div>
<!-- or to have image linked: -->
<!--<a href="."><script type="text/javascript">getRandomImage(random_images_array)</script></a>-->
<div id="introText" class="animated fadeIn">
<p>div text</p>
</div>
<script type="text/javascript">window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); </script>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.display = "block";}
setTimeout("showIt()", 5000); </script>
</div> <!-- end of #wrapper -->
</body>
</html>
CSS:
/*global stylesheet*/
@charset "UTF-8";
html, body {
height: 100%;
margin: 0;
background-color: blue;
background-size: cover;
}
/* so linked image won't have border */
a img { border:none; }
.fadeout {
animation: fadeOut 1s forwards;
animation-delay: 3s;
}
@keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
/*my most current attempt at fadein through CSS */
.animated {
animation-duration: 3s;
animation-fill-mode: both;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
#welcomeImage img {
max-height: 100%;
width: auto;
}
#introText {
height: 100%;
padding: 100px;
padding-left: 300px;
padding-right:300px;
display: none;
text-align: center;
background-color: blue;
color: purple;
font-size: 2em;
font-weight: 900;
}
找到了答案-使用jquery实现了背景图像的设置，然后能够在CSS中使用background-size属性。不确定它在javascript中会是什么样子，但如果有人能够为我翻译它，或者让我知道它甚至是可能的，我很想看看如何在javascript中进行比较!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link href="css/uikit.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
$(document).ready(function() {
$('body').css({'background-image': 'url(images/' + random_images_array[Math.floor(Math.random() * random_images_array.length)] + ')'});
})
</script>
</head>
<body>
<div id="introText" class="animated fadeIn">
<p>div text</p>
</div>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.display = "block";}
setTimeout("showIt()", 5000); </script>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0;
background-color: blue;
background-size: cover;
}