Question

我在github页面上有website，它可以在任何桌面浏览器上完美运行。但是，我的两张背景图片不会显示在移动设备上（我只测试了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;
}

如果我将100vh更改为100％，则图像会加载，但它们会垂直拉伸。有什么建议吗？

Answer 1

你可以：

使用固定位置，背景位置为center center：请参阅＆＃34; CSS background-size: cover replacement for Mobile Safari＆＃34;。
This page也指background-attachment: fixed;，同时提醒您使用视口值（例如vh和vw）在iOS 7上受到技术支持，但根本不起作用，因此rodneyrehm/viewport-units-buggyfill项目。
或（不太优雅），对于给定尺寸的媒体使用固定尺寸：请参阅＆＃34; Background image not displayed properly on iPad and iPhone＆＃34;

Answer 2

似乎iPhone无视@media设备的handheld规则（请参阅此处Do iPhone / Android browsers support CSS @media handheld? ）。如果图像不是正方形，则background-size属性100% 100%会使图像拉伸。

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

Answer 3

您的背景大小属性和背景高度属性看起来与竞争高度相似。查看CSS-Trick's post on background-sizes for a better implementation。由于您希望使用图像覆盖页面的宽度，请改为使用background-size:cover。希望这会有所帮助。

Answer 4

使用此

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its     container's size */
background-size: cover;

背景图片无法在iPad或iPhone上展示/伸展

4 个答案: