iOS 上的固定位置背景答案

【问题标题】：Fixed Position Background on iOSiOS 上的固定位置背景
【发布时间】：2013-04-07 04:54:46
【问题描述】：

我有一个网站，它有一个完整的图像固定背景，内容“浮动”在上面。它在桌面浏览器中运行良好，但固定的背景最终会在 iPad 和其他平板电脑上滚动。这似乎是一个常见问题，但后来我浏览了这个网站，即使在 iPad 上它似乎也有固定的背景。

http://confitdemo.wordpress.com/

知道他们是如何做到这一点的吗？我试过了：

#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;
}

（这是从 Firebug 复制的，这就是它不是速记的原因）。

但是没有运气。有人让我指出正确的方向吗？

【问题讨论】：

标签： html css ipad mobile fixed

【解决方案1】：

我认为问题在于您的表格很可能会调整背景大小，因此如果您添加此声明，很可能它应该可以正常运行。

background-attachment: fixed !important;
background-size: cover !important;

编辑：

如果这不起作用，我能想到的唯一其他原因是 ios 必须以某种方式调整正文大小以与内容一样大，那么您要做的就是在正文标签内创建一个具有正确属性的 div

#fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}

这是一个类似的解决方案：

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

编辑 - 2：

添加了一个你可以检查的小提琴：

http://jsfiddle.net/uZRXH/3/

下面是在你的 ipad 上试用的链接：

http://fiddle.jshell.net/uZRXH/3/show

【讨论】：

对不起，我应该包含完整的代码。我编辑了原始帖子以包含完整的代码。
@JeremyE 你能给我发一个你网站的链接吗，因为我做了一个演示，对我来说效果很好。
在原帖中添加了演示链接。它在常规浏览器中运行良好，但在 iPad 上背景滚动。
@JeremyE 添加了一个适用于我的 iphone 和 ipad 的工作示例
对不起，我措辞错误。我已经尝试过该解决方案，虽然我得到了它的工作，但我遇到了 scrollTop 问题。然后我发现了可以工作的 backstretch jQuery 插件。感谢您的洞察力，因为这是我能找到的最接近的解决方案。

【解决方案2】：

该网站在移动浏览器中使用了一个技巧，利用了 background-attachment: fixed 不起作用，position: fixed 起作用的事实，因此在移动浏览器中它只是创建了一个 <div>，它仍然固定在滚动内容后面.

【讨论】：

【解决方案3】：

好的，所以我已经建立了那个网站，如果我将它包裹在一个 div 中给那个 div 一个固定的位置，那么具有固定背景的部分就会变得混乱。所以我写了这个，它可以在 iPhone 上运行。

我有一个固定的标题，所以这很容易使用，但任何总是在视口顶部的东西都可以......

        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); 

        }

然后给元素给一个“固定背景”一个背景位置的过渡，你就完成了。虽然不是那么整洁......而且我觉得有更好的解决方案......但这很有效。

【讨论】：

【解决方案4】：

1) z-index: -1; 如果您有链接图像，则必须将其添加到 Breezer 的第二种方法中，否则图像将被隐藏（在背景后面）

2) 在相同的方法中，我必须将 div 放在其余内容之前，如下所示，否则如果在 div 标签内添加内容，则页面不可滚动：

<body> <div id="fixedbg"></div>  </body>

【讨论】：