随机化图像以显示在主页背景上

Question

如何在每次有人访问主页时更改背景图片？当前的背景图像是在 CSS 中控制的，而不是在 HTML 中，因此我们将不胜感激。

查看单个背景图片的 CSS：

 header .container-fluid
 {
 background-image: url("../../images/The Connection at St-Martin-in-the- 
 Fields/Carousel image - med res The Connection -1067838.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 height: 100vh;
 padding-top: 36px;
 }

Answer 1

只需在页面中添加一点 JavaScript 即可更改页面加载时的图像：

// make a list of images to select from
var images = ['cat.jpg', 'dog.jpg'];

// find the element whose background image you want to change
var elem = document.querySelector('header .container-fluid');

// get the index position of the image in `images` to be displayed
var index = Math.floor(Math.random() * images.length);

// set the background image property
elem.style.backgroundImage = 'url(' + images[index] + ')';

JavaScript 设置的背景图片会优先于 CSS 样式，所以会显示 JavaScript 设置的图片。