Jumbotron背景图像与HTML背景图像不同步

我想用背景图像覆盖我的页面，我使用的是一个jumbotron，它覆盖了页面的所有组件，但它的大小不是覆盖所有页面。因此，我还将背景图像附加到css文件中的.html

    .jumbotron {
  padding: 1rem 1rem;
  background-color: #e9ecef;
  height: 100%;
  background-size: cover;
  background-image: url('background.jpg');
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-image: url('background.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

---

现在，这个图像看起来像一面破碎的镜子。我怎样才能使它看起来像一个单一的图像？或者这样做的逻辑方法是什么？

您可以在body标签上应用背景图像

body {
      width:100%;
      background-image: url('background.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
}

---

您可以在主体标记上应用背景图像

body {
      width:100%;
      background-image: url('background.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
}

你可以试试这个

body {
  margin: 0;
  height: 100vh;
  background-image: url(background.jpg);
  background-size: cover;
  background-position: center;
}

你可以试试这个

body {
  margin: 0;
  height: 100vh;
  background-image: url(background.jpg);
  background-size: cover;
  background-position: center;
}

---

但是背景完成了，但是jumbotron背景没有设置为图像，看起来是白色的。你能提供一个片段让我检查一下吗？对不起，当我更改了jumbotron的不透明度时，这是有效的，但是背景完成了，但是jumbotron背景没有设置为图像，看起来是白色的。你能提供一个片段让我检查一下吗，当我改变jumbotron的不透明度时，这就起作用了