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;
}

CSS：比整个页面大的背景图像

1 个答案: