Html iOS上的固定位置背景

我有一个网站，有一个完整的图像固定的背景，上面的内容“浮动”。它可以在桌面浏览器中正常工作，但固定的背景会在iPad和其他平板电脑上滚动。这似乎是一个常见的问题，但后来我浏览了这个网站，它似乎有一个固定的背景，甚至在iPad上

知道他们是怎么做到的吗？我试过：

#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复制的，这就是为什么它不是速记）

---

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

我认为问题在于，您的表很可能调整了背景的大小，因此，如果您添加此声明，很可能在引擎盖中，它会正常运行

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

编辑：

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

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

下面是一个类似的解决方案：

编辑-2:

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

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

---

该网站在移动浏览器中使用了一个技巧，利用了这样一个事实：虽然

后台附件：fixed

不起作用，但

位置：fixed

起作用，所以在移动浏览器中，它只创建了一个

，在滚动内容后面保持固定不变。

好的，我已经准备好构建该网站了，如果我把背景固定的部分包在一个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); 

        }

if（//在手机上）{
变量headerH、headerH2、视口、滑块、分辨率
视口=$（窗口）.height（），
headerH2=80//使用固定收割台测量时的校正，
$topheader=$（'.top_header'），
$slider=$（'#twinslider'）//要检查是否在视口中的元素；
函数getH（）{
headerH=$topheader.offset（）.top；
sliderH=$slider.offset（）.top；
res=（（headerH-headerH2）-滑块）+viewportH）/viewportH；
如果（分辨率>0&&res<1.4）{
return res；//这是真的，是一个值，需要进一步计算
}否则{
返回false；
}
}
getH（）；
setInterval（function（）{//在我听scroll之前，但这对性能更好
if（getH（））{//if滑块在视口中
$slider.find（'li'）.css（{//要为其设置背景位置的元素）
“背景位置”：“中心”+res*50+'%
}, 100);
}                   
}, 25); 
}

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

1）

z-index:-1添加到Breezer的第二种方法中，否则图像将保持隐藏（在背景后面）

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


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