Question

我有一个带有背景图片的HTML / CSS网页。图像固定在桌面上，看起来很棒，主文本按预期滚动显示。

然而，在iPhone6上，它看起来很糟糕：有时会出现两个版本的照片;两个版本都滚动图像，而不是保持放置，第二个版本被拉伸到页面的整个长度。

我已经搜索了堆栈溢出的高低，以获得答案，并且没有一个答案有效：媒体查询似乎不起作用; -webkit似乎不起作用;似乎没什么用。

2017年，也许是时候更新答案了：如何在iPhone6手机（以及一般的野生动物园和手机游猎）上避免这个问题？

这是我到目前为止的代码：

body {
  background-image: url(rsz_background.jpg);
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

注意：这里是网站的实时链接：www.successfulnewyear.com如果您使用适用于iphone6或iphone5的Chrome开发工具查看网站 - 它看起来好像滚动精美，背景保持不变。但是，如果您实际访问iphone5或iphone6上的网站，您会看到照片放大到网站的整个大小，并且滚动而不是保持固定。

Answer 1

您可以将背景图像放在身体正下方的另一个div中。使这个div位置：固定。然后将背景图像放在此上，而不进行任何“固定”操作。参数。

<html lang="en">
   <head></head>
    <body>
     <div class="bkgdImage"></div>
     <header></header>
        <section id="homeContainer">
           //content etc
         </section>
   </body>
</html>

CSS：

html{
height: 100%;
min-height: 100%;
}
body {
 min-height: 100%;
 width: 100%;
height: 100%;
margin: 0;
}
.bkgdImage {
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100; (so it's behind your content)
 margin: 0;
 background: url(../yourimage.jpg) center center no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

这适用于我的iPhone 5以及我测试过的所有移动浏览器。您可能需要更改html＆amp;的高度身体，以满足您的需求。 You can see it working here和did a blog post on it。

2017回答＆＃34;如何在iPhone6和＃34;

1 个答案: