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; }

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

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

Answer 2

该网站在移动浏览器中使用了一种技巧，利用了background-attachment: fixed虽然无法工作的事实，但position: fixed确实如此，因此在移动浏览器中它只会创建一个{{1}在滚动内容后面仍然固定。

Answer 3

好吧，所以我已经建立了那个网站，如果我将它包装在一个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); 

        }

然后给元素提供一个固定的背景＆＃39;背景位置的转换，你已经完成了。虽然不是那么整洁......而且我觉得这是一个更好的解决方案......但这很有效。

Answer 4

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

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

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

iOS上的固定位置背景

4 个答案: