iOS 上的固定背景位置

Question

iOS 上的固定背景位置

19

我有一个网站，它有一个全屏固定的背景，内容在其上“浮动”。它在桌面浏览器中很好用，但在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复制过来的，这就是为什么它不是速记法。

但是我没有成功。有人能指导我走向正确的方向吗？

- JeremyE

4个回答

7

那个网站在移动浏览器中使用了一个技巧，利用了这样一个事实：虽然background-attachment: fixed不起作用，但position: fixed可以。因此，在移动浏览器中，它只是创建了一个<div>，并将其固定在滚动内容的后面。

- rev087

0

好的，我已经建立了那个网站，如果我将固定背景部分包装在一个 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); 

        }

然后将元素赋予一个“固定背景”，在background-position上进行过渡，就完成了。虽然不是很整洁...但我感觉有更好的解决方案...不过这个也可以。

- Sjerp van Wouden

0

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

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

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

- Rafael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Breezer · Accepted Answer

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

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应用中设置固定位置背景图，可以参考这个链接：https://dev59.com/5V_Va4cB1Zd3GeqPTXKN 编辑-2:

添加了一个你可以查看的演示：http://jsfiddle.net/uZRXH/3/ 还有一个链接可以在iPad上试用：http://fiddle.jshell.net/uZRXH/3/show