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 复制的，这就是它不是速记的原因）。

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

4

4 回答 4

7

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

于 2014-05-16T22:37:14.073 回答
7

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

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

编辑：

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

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

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

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

编辑 - 2：

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

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

这是在您的 ipad 上试用的链接：

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

于 2013-04-15T06:47:24.533 回答
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); 

        }

然后给元素给一个“固定背景”一个背景位置的过渡，你就完成了。虽然不是那么整洁......而且我觉得有一个更好的解决方案......但这很有效。

于 2015-03-25T09:48:10.077 回答
0

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

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

<body> <div id="fixedbg"></div> <!-- CONTENT HERE --> </body>

于 2017-01-11T06:08:35.767 回答