我有代码可以在javascript和CSS中刷新图像时将图像随机化，以格式化图像，但我不知道如何将两者结合起来

Question

很抱歉，如果标题没有意义，我对此是个新手，所以这是我所谈论的内容： https ://jsfiddle.net/a3668a1f/1/

我希望显示在标题框下方的图像出现在标题框中。

我只是将这些图像放在那里作为示例。

 var images = [ "https://i.redd.it/1ev9elr85xcz.jpg", "https://i.redd.it/g6kc3upsvqdz.jpg", "https://i.redd.it/koucki3aygdz.jpg" ]; function randImg() { var size = images.length var x = Math.floor(size * Math.random()) document.getElementById('image').src = images[x]; } randImg(); 

 h1 { color: silver; text-align: center; max-width: 100%; vertical-align: middle; line-height: 85px; height: 100px; border: solid; border-color: silver; border-radius: 25px; border-width: 5px; background-position: center; background-repeat: no-repeat; background-image: url(https://i.redd.it/pvqzvajftpdz.jpg); background-size: cover; box-sizing: border-box; } 

 <div> <h1> Title. <img id="image" /> </h1> </div> 

Answer 1

你是这个意思吗

 var images = [ "https://i.redd.it/1ev9elr85xcz.jpg", "https://i.redd.it/g6kc3upsvqdz.jpg", "https://i.redd.it/koucki3aygdz.jpg" ]; function randImg() { var size = images.length var x = Math.floor(size * Math.random()) document.querySelector('h1').style.backgroundImage='url('+images[x]+')'; } randImg(); 

 h1 { color: silver; text-align: center; max-width: 100%; vertical-align: middle; line-height: 85px; height: 100px; border: solid; border-color: silver; border-radius: 25px; border-width: 5px; background-position: center; background-repeat: no-repeat; background-image: url(https://i.redd.it/pvqzvajftpdz.jpg); background-size: cover; box-sizing: border-box; } 

 <div> <h1> Title. <img id="image" /> </h1> </div>