iOS上的固定位置背景

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

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的复制，这就是为什么它不是简写）。

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

来源

2013-04-15 JeremyE

我认为问题在于，你的表最有可能重新调整的背景下，因此，如果您添加此声明中，最有可能的引擎盖应该让它运行得很好。

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

编辑：

如果这行不通的唯一其他的原因，我能想到的是，IOS必须以某种方式调整车身尺寸是一样大的内容，你必须做的又是什么创建body标签内一个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

来源

2013-04-15 06:47:24 Breezer

对不起，我应该已经包括了完整的代码。我编辑了原始帖子以包含完整的代码。 – JeremyE

@JeremyE你可以给我一个链接到你的网站，因为我做了一个演示，它对我来说工作得很好。 – Breezer

添加了原始帖子的演示链接。它在普通浏览器中运行良好，但在iPad上后台滚动。 – JeremyE

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

来源

2014-05-16 22:37:14 rev087

好了，我媒体链接建立一个网站，有一个固定的背景部分会得到搞砸了，如果我把它包在一个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); 

     }

，然后给送“固定背景元素'在背景位置的转换，你就完成了。虽然不是那么整齐，但我觉得有更好的解决方案......但这是有效的。

来源

2015-03-25 09:48:10

1）z-index: -1;必须添加到Breezer的第二种方法，如果你有同样的方法链接的图像，否则图像存隐忧（背景后面）

2），我的其余部分之前把DIV内容如下或页面不可滚动，如果内容是div标签里补充说：

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

来源

2017-01-11 06:08:35 Rafael

iOS上的固定位置背景

回答

相关问题