iOS上的固定位置背景 [英] Fixed Position Background on iOS

问题描述

我有一个网站有一个全图像固定的背景，内容浮动上面。它在桌面浏览器中工作正常，但固定的背景结束了在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复制的，这就是为什么它不是速记）。

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

解决方案

我认为问题在于你的表最有可能调整背景的大小，如果你添加这个声明，在很可能的情况下，它应该得到它运行正常。

  background-attachment：fixed！ 
 background-size：cover！important; 
   
 
 
 
 编辑：
 
 
 
如果这不工作只有其他原因，我可以想到的是，ios必须以某种方式调整主体大小，以便像内容一样大，你必须做的是在body标签内创建一个正确的属性

  #fixebg {
 background：url（image.jpg） 
 height：100％; 
 width：100％; 
 position：fixed; 
} 
  

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

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

编辑 - 2： / p>

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

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

这里是link尝试在您的ipad上：

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

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.

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

But had no luck. Anyone get me pointed in the right direction?

解决方案

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

#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

Edit - 2:

Added a fiddle you can check:

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

And here is link to try it out on your ipad:

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

这篇关于iOS上的固定位置背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！