iOS上的固定位置背景

Question

我有一个网站,它有一个全图像固定的背景,内容"漂浮"在上面.它在桌面浏览器中运行良好,但固定的背景最终会在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复制的,这就是为什么它不是简写).

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

Answer 1

我认为问题在于你的表很可能会调整后台的大小,所以如果你添加这个声明,很可能会让它运行得很好.

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

编辑:

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

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

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

如何使用Phonegap在iPhone应用程序的jquery mobile中设置固定位置背景图像

编辑 - 2:

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

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

这里有链接在你的ipad上尝试:

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

Answer 2

该网站使用了一招在移动浏览器,采取的事实,虽然优势background-attachment: fixed不工作,position: fixed做,所以在移动浏览器,它只是创建一个<div>是保持固定的滚动内容后面.