2017年回答“如何使背景图像固定在iPhone6上”

我有一个带背景图像的HTML/CSS网页。该图像固定在桌面上，看起来很棒，主文本按照预期滚动。2017年回答“如何使背景图像固定在iPhone6上”

在iPhone6，但是，它看起来可怕：有时，在照片中显示的两个版本;两个版本都会随图像一起滚动，而不是保持放置，第二个版本会拉伸到整个页面。

我已搜查高和低的答案堆栈溢出，并没有答案的工作：媒体查询不出现工作; -webkit似乎不起作用;似乎没有任何工作。

这是2017年，也许是时候更新的答案：如何避免iPhone6移动（和一般的Safari和移动Safari浏览器）这个问题呢？

这是我的代码至今：

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如果您在使用Chrome浏览器开发工具iphone6查看网站，或iphone5的 - 它看起来好像在背景保持不变的情况下精美地滚动。但是，如果您实际上通过iphone5或iphone6访问该网站，则会看到照片放大到网站的整个大小，并且滚动而不是保持固定。

来源

2017-01-17 Monroe Mann

放在窗口上的图像这样，它都会显示在 –

您需要使用多组图像的不同分辨率的viewControllers，你听说过响应的CSS？ [见这里]（http://stackoverflow.com/questions/16443380/common-css-media-queries-breakpoints） – iphonic

你可以把背景图像中的另一个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和所有移动的browers我测试过的。您可能需要更改html &机身的高度以适合您的需求。 You can see it working here和did a blog post on it。

来源

2017-08-02 15:29:24

2017年回答“如何使背景图像固定在iPhone6上”

回答

相关问题