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移动版(以及野生动物园和一般的移动野生动物园)上出现此问题?
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)?
这是我到目前为止的代码:
This is the code I have so far:
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屋！
