2017 回答“如何使背景图像固定在 iPhone6 上"； [英] 2017 Answer to "How to make background image fixed on iPhone6"
问题描述
我有一个带有背景图片的 HTML/CSS 网页.图像固定在桌面上，看起来很棒，正文按预期滚动.
I have an HTML/CSS webpage with a background image. The image is fixed on desktop and looks great, and the main text scrolls over it as intended.
然而，在 iPhone6 上，它看起来很糟糕:有时会出现两个版本的照片；两个版本都随着图像滚动，而不是原地不动，第二个版本被拉伸到页面的整个长度.
On iPhone6, however, it looks horrible: sometimes, two versions of the photo show up; both versions scroll with the image, rather than staying put, and the second one is stretched to the entire length of the page.
我已经在堆栈溢出的高低搜索了答案，但没有一个答案起作用:媒体查询似乎不起作用；-webkit 似乎不起作用；似乎没有任何效果.
I have searched high and low on stack overflow for answers, and none of the answers work: media queries don't appear to work; -webkit doesn't appear to work; nothing seems to work.
现在是 2017 年，所以也许是时候更新答案了:如何在 iPhone6 手机(以及一般的 safari 和移动 safari)上避免这个问题?
It's 2017, so maybe it's time for an updated answer: how to avoid this problem on iPhone6 mobile (and safari and mobile safari in general)?
这是我目前的代码:
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 访问该网站，您会看到照片放大到整个网站的大小，并且它会滚动而不是保持固定.
NOTE: here is a live link to the website: www.successfulnewyear.com If you view the site using chrome dev tools for iphone6, or iphone5--it looks as if it scrolls beautifully with the background staying put. However, if you actually visit the site on your iphone5 or iphone6, you will see that the photo enlarges to the entire size of the website, and it scrolls instead of staying fixed.
推荐答案
您可以将背景图片放在正文下方的另一个 div 中.使这个 div 位置:固定.然后把背景图片放在这个上，没有任何'固定'参数.
You can put the background-image in another div just below the body. Make this div position: fixed. Then put the background image on this without any 'fixed' parameter.
<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 & 的高度.体以满足您的需求.你可以看到它在这里工作和写了一篇博文.
This works on my iPhone 5 and all mobile browers I've tested on. You might need to change the heights of html & body to suit your needs. You can see it working here and did a blog post on it.
这篇关于2017 回答“如何使背景图像固定在 iPhone6 上"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
