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 !important;
background-size: cover !important;

编辑:

如果这不起作用，我能想到的唯一一个原因是ios必须以某种方式调整body大小，使其与内容一样大，那么你要做的就是在body标签中创建一个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

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

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

，然后给元素一个"固定背景"在背景位置的过渡，你就完成了。虽然不那么整洁....我觉得有更好的解决办法

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

2)同样的方法，我必须把div放在其他内容之前，否则如果内容被添加到div标签中，页面是不可滚动的:

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

相关内容

最新更新

热门标签：