html - CSS:背景图像大于整个页面

Question

编辑:不是链接问题的重复，因为我说我在另一个问题中尝试了接受的解决方案，但它们没有解决我的问题

我正在尝试为包含部分提供背景图像，但该图像比屏幕大大约 15%。我尝试将背景大小设置为 100%、覆盖和包含，但它始终比页面大。我查看了 DOM 中每个元素的大小，它们的大小都相同，没有一个更大，所以我很困惑是什么导致了更大的背景图像。这是我的代码: html

<section className="Intro">
    <img />
    <h1>...</h1>
    <h2>...</h2>
    <h3>...</h3>
    <p>...</p>
</section>

CSS

.Intro {
  background-image: url('../mobile-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: white;
  height: 100vh;
}

Answer 1

您的代码是正确的。但是有些浏览器不支持某些 css 规则。然后我们必须使用他们的 css 规则。试试这个。它会起作用

.Intro {
  background-image: url('../mobile-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
  color: white;
  height: 100vh;
}