背景图像在iPad或iPhone上没有显示/拉伸

Question

我在github页面上有一个网站，它在任何桌面浏览器上都能很好地工作。然而，我的两个背景图像不会出现在移动设备上(我只测试了iPad和iPhone，可能只是IOS)。我尝试添加媒体查询，以确保在手持设备上将background-attachment属性设置为scroll (我曾读过这是问题所在)。我也有媒体查询，以确保图像不是太大的加载。这是我的html：

<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>

下面是css：

#image-1 {
  background-image: url('imgs/coding.jpg');
}
#image-2 {
  background-image: url("imgs/game.JPG");
}
@media only screen and (min-width: 500px) {
    /* For mobile phones: */
    #image-1 {
      background-image: url("imgs/coding-large.jpg");
    }
    #image-2 {
      background-image: url("imgs/game-large.jpg");
    }
}
@media not handheld {
    .background-image {
      background-attachment: fixed;
    }
}
.background-image {
  opacity: 0.8;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100vh;
  height: 85vh;
}

如果我把100 to改为100%，那么图像就会加载，但是它们是垂直拉伸的。有什么建议吗？

Answer 1

你可以：

• 使用固定位置，背景位置为center center：参见"CSS背景尺寸:移动Safari的封面替换“。 此页也是指一个background-attachment: fixed;，而重新挖掘使用的是在iOS 7上技术上支持视图端口值(如vh和vw)，但是根本不起作用，因此是rodneyrehm/viewport-units-buggyfill项目。
• 或者(不太优雅)，对给定大小的媒体使用固定大小:参见"背景图像在iPad和iPhone上没有正确显示“

Answer 2

iPhones似乎忽略了handheld设备的@media规则(参见这里的iPhone / Android浏览器支持CSS @media手持设备吗？)。如果图像不是正方形的话，给出background-size属性的100% 100%会使图像拉伸。

因此您可以使用max-width媒体查询来检测移动设备，并将background-attachment设置为scroll。或者使用background-size: cover或背景大小：100% auto

Answer 3

看起来你的背景大小属性和背景高度属性有竞争的高度。看看CSS-特里克关于背景大小的文章，以便更好地实现。因为看起来您想要用图像覆盖页面的宽度，所以使用background-size:cover代替。希望这能有所帮助。