html - 手机无法覆盖背景图片

我的主页上有一张背景图片，可以正确覆盖整个屏幕。但是，在移动设备上，图像无法调整大小以正确放置。相反，它仅显示图像的一部分。 CSS如下：

#hero {
  width: 100%;
  height: 50vh;
  overflow: auto;
  background: url("./hero.webp") no-repeat center center fixed;
  background-size: cover;
}

@media (min-width: 768px) {
  #hero {
    height: 100vh;
  }
}

这是主页的链接。如果您调整浏览器大小以模仿移动屏幕，您将看到我在说什么：

https://stormy-temple-25830.herokuapp.com/#/

最佳答案

我通过从背景图片属性中删除“固定的无重复中心中心”解决了该问题。这是更新的CSS：

#hero {
  width: 100%;
  height: 50vh;
  overflow: auto;
  background: url("./hero.webp");
  background-size: cover;
}

@media (min-width: 768px) {
  #hero {
    height: 100vh;
  }
}

关于html - 手机无法覆盖背景图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57260433/