Question

我想用背景图像覆盖我的页面，而我正在使用超大屏幕，它覆盖了页面的所有组件，但是其大小不能覆盖所有页面。因此，我还在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;
}

现在，图像看起来像是破碎的镜子。如何使它看起来像单个图像？还是这样做的逻辑方法是什么？

Answer 1

您可以在人体标签上应用背景图片。

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

Answer 2

您可以尝试一下，

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

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

2 个答案: