将随机平铺图像加载到样式/背景中

Question

我目前使用这个 function 来随机获取图像

<script>
window.onload = choosePic;
var myPix = new Array(
"https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif",
"https://ptgmedia.pearsoncmg.com/images/chap4_9780321996701/elementLinks/04fig15.jpg");
function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];}
</script>

<style> body {background-image: url(myPicture);}</style>

<!--<img src="https://pt" width="305" height="312" id="myPicture">-->

但是它不会作为 css 的一部分加载到 bg 中。

Answer 1

知道了：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#random{
  width: 100%;
  height: 100%;
  //border: 1px solid black;
  background-image: url('');
  //background-position: center center;
  //background-size: cover;
  //background-repeat: no-repeat;}
</style>
<body>
<body onload="randombg()"><div id="random" ></div>  
  <script>
function randombg(){
  var random= Math.floor(Math.random() * 6) + 0;
  var bigSize = ["url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
                 "url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
                 "url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')"];
  document.getElementById("random").style.backgroundImage=bigSize[random];}</script>

选项 #2

<style>
.random_bg{
    height: 100%;
    width: 100%;
    position: relative;}
</style>
<section><div class="rt-container">
 <div class="col-rt-12">
<div class="Scriptcontent">
 <div class="random_bg"></div>
</section>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
 <script>function pic() {var bgm = ['https://i.ibb.co/9mxH8pL/Castillo.gif',
'https://i.ibb.co/fkK7bK2/Elec-Tower.gif',
'https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif',
'https://i.ibb.co/3C8pd4h/Standart-Comp-EXE3.gif',
'https://i.ibb.co/LJKnfhh/Scilab.gif'];
    $('.random_bg').css({
        'background' : 'url('+ bgm[Math.floor(Math.random()*3)] + ') repeat',
        'background-position' : '100%',
    'background-size' : 'repeat'});}pic();</script>

选项 #3

<style type="text/css">
#banner {
 height:100%;
 background:transparent url(https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif) repeat cover cover;
}
</style>
<script type="text/javascript"> 
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif"); 
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")"; 
}
</script>
</head>
<body >
<div id="banner"></div>
</body>