Html iOS上的固定位置背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16009035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed Position Background on iOS
提问by JeremyE
I have a website that has a full-image fixed background that the content "floats" above. It works fine in desktop browsers, but the fixed background ends up scrolling on iPads and other tablets. This seems to be a common issue, but then I ran across this website, which seems to have a fixed background even on iPad's.
我有一个网站，它有一个全图像固定背景，内容“浮动”在上面。它在桌面浏览器中运行良好，但固定背景最终会在 iPad 和其他平板电脑上滚动。这似乎是一个常见问题，但后来我浏览了这个网站，即使在 iPad 上，它似乎也有固定的背景。
http://confitdemo.wordpress.com/
http://confitdemo.wordpress.com/
Any clue how they are pulling that off? I tried:
知道他们是如何做到这一点的吗？我试过：
#content-wrapper.posts-page {
background-attachment: fixed !important;
background-clip: border-box;
background-color: transparent;
background-image: url("image path");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
(This was copied from Firebug, which is why it's not shorthand).
（这是从 Firebug 复制的，这就是为什么它不是速记的原因）。
But had no luck. Anyone get me pointed in the right direction?
但没有运气。有人让我指出正确的方向吗？
采纳答案by Breezer
I think the problem lies in that your table most likely resizes the background, so if you add this declarations, in most likely hood it should get it running just fine.
我认为问题在于您的表格很可能会调整背景大小，因此如果您添加此声明，则很可能在引擎盖下它应该可以正常运行。
background-attachment: fixed !important;
background-size: cover !important;
Edit:
编辑：
If this doesnt work only other reason i can think of is that ios must somehow resize the body size to be as big as the content, what you have to do then is create a div inside the body tag with correct properties
如果这不起作用，只有我能想到的其他原因是 ios 必须以某种方式将主体大小调整为与内容一样大，那么您要做的就是在具有正确属性的 body 标记内创建一个 div
#fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}
Here is a similiar solution:
这是一个类似的解决方案：
How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap
如何使用Phonegap在jquery mobile中为iPhone应用程序设置固定位置背景图像
Edit - 2:
编辑 - 2：
Added a fiddle you can check:
添加了一个小提琴，您可以检查：
And here is link to try it out on your ipad:
这是在您的 ipad 上试用的链接：
回答by rev087
That website uses a trick in mobile browsers, taking advantage of the fact that while background-attachment: fixeddoesn't work, position: fixeddoes, so in mobile browsers it just creates a <div>that remains fixed behind the scrolling content.
该网站在移动浏览器中使用了一个技巧，利用了一个事实，即虽然background-attachment: fixed不起作用，position: fixed但在移动浏览器中它只是创建了一个<div>在滚动内容后面保持固定的。
回答by Sjerp van Wouden
ok, so I allready build that site, the part with a fixed background would get messed up if I wrapped it in a div to give that div a fixed position. So I wrote this and it works on the iPhone.
好的，所以我已经建立了那个站点，如果我将它包裹在一个 div 中以给那个 div 一个固定的位置，那么具有固定背景的部分会变得一团糟。所以我写了这个，它适用于 iPhone。
I've got a fixed header so this was easy to use but anything that's allways at the top of the viewport will do...
我有一个固定的标题，所以这很容易使用，但任何总是在视口顶部的东西都可以......
if (//on mobile) {
var headerH, headerH2, viewportH, sliderH, res
viewportH = $(window).height(),
headerH2 = 80 //correction when measuring with fixed header,
$topheader = $('.top_header'),
$slider = $('#twinslider') //the element to check for if in viewport;
function getH() {
headerH = $topheader.offset().top;
sliderH = $slider.offset().top;
res = (((headerH - headerH2) - sliderH) + viewportH) / viewportH;
if (res > 0 && res < 1.4) {
return res; // thats truthy and a value for further calculation
} else {
return false;
}
}
getH();
setInterval(function(){ // before i listened to scroll, but this was better for performance
if (getH()) {//if slider is in viewport
$slider.find('li').css({ //the element to set the background pos for
'background-position': 'center ' + res * 50 + '%'
}, 100);
}
}, 25);
}
and then give the element to give a 'fixed background' a transition on the background-position and you're done. Not that neat though....and I feel like there's a better solution...but this works.
然后给元素一个“固定背景”在背景位置上的过渡，你就完成了。虽然不是那么整洁......而且我觉得有一个更好的解决方案......但这有效。
回答by Rafael
1) z-index: -1;must be added to Breezer's second approach if you have link images otherwise the images are kept hidden (behind the background)
1)z-index: -1;如果您有链接图像，则必须将其添加到 Breezer 的第二种方法中，否则图像将保持隐藏状态（在背景后面）
2) On same approach, I had to put the div before the rest of the content as follows or the page was non-scrollable if content is added inside the div tags:
2）以相同的方法，我必须将 div 放在其余内容之前，如下所示，否则如果将内容添加到 div 标签内，则页面不可滚动：
<body>
<div id="fixedbg"></div>
<!-- CONTENT HERE -->
</body>
<body>
<div id="fixedbg"></div>
<!-- CONTENT HERE -->
</body>
