我无法更改我网站的背景图片答案

【问题标题】：I can't make changing background image of my website to change我无法更改我网站的背景图片
【发布时间】：2021-10-13 22:41:42
【问题描述】：

我正在尝试让我的网站的背景图片每隔一定的秒数改变一次，我尝试这样做：

var images = new Array(
  'Space.gif',
  'Windows.gif',

);

var slider = setInterval(function() {
  document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("'+images[0]+'")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 10000);

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
}

<div class="bg-img" style="background-image: url('space.gif'),background-image: url('windows.gif');">
  <div class="overlay"></div>
</div>

我也尝试过使用这段 JavaScript 代码：

 function changeBg(){

  const images = [
     'url("Space.gif")',
     'url("Windows.gif")',
    ]
    const selection = document.querySelector('selection')
    const bg = images[Math.floor(Math.random()* images.length)];
    selection.style.backgroundImage = bg; 
}          
setInterval(changeBg, 1000000)

但没有任何效果:(

【问题讨论】：

在您的 CSS 中，您正在为背景图像准备 <body>。但是您的 JavaScript 引用了 .bg-img 元素。要将背景图像应用到<body> 还是<div>？此外，如果<div> 没有宽度或高度，它可能不会显示在页面上。
我正在尝试将背景更改为整页，所以这意味着我必须在 css 中更改“bg-img”的“body”对吗？
为什么不能改错字？？
我可以修正缺少引号的错字，但我的页面仍然没有改变背景图片：/

标签： javascript html css image background

【解决方案1】：

在您的 CSS 中，您正在为背景图片准备 <body>：

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
}

但是您将图像添加到具有“bg-img”类而不是<body> 的元素：

document.getElementsByClassName('bg-img')...

您可以 (1) 将图像添加到 <body> 或 (2) 使 <div> 覆盖全屏：

1) 在<body>元素上设置图片：

Document.body 属性表示当前文档的 <body> ... 节点，如果不存在这样的元素，则为 null。

var images = new Array(
  'https://fakeimg.pl/200x150/282868/eae0d0/',
  'https://fakeimg.pl/200x150/682828/eae0d0/'
);

var slider = setInterval(function() {
  document.body.setAttribute('style', 'background-image: url("' + images[0] + '")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 2000);

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  background-image: url('https://fakeimg.pl/200x150/282828/eae0d0/');
}

2) 或将<div> 设为全屏：

由于<div> 有no content and no width or height，它不会显示在页面上。您可以使用 CSS 制作元素 cover the browser window。

var images = new Array(
  'https://fakeimg.pl/200x150/282868/eae0d0/',
  'https://fakeimg.pl/200x150/682828/eae0d0/'
);

var slider = setInterval(function() {
  document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("' + images[0] + '")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 2000);

.bg-img {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  background-image: url('https://fakeimg.pl/200x150/282828/eae0d0/');
}

&lt;div class="bg-img"&gt;&lt;/div&gt;

【讨论】：