web-dev-qa-db-ja.com

iOSの固定位置の背景

私は、コンテンツが上に「浮かんでいる」全画像固定背景を持つウェブサイトを持っています。デスクトップブラウザーでは正常に動作しますが、iPadやその他のタブレットでは固定の背景がスクロールしてしまいます。これはよくある問題のように思えますが、このWebサイトに出くわしました。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からコピーされたものです。これが速記ではない理由です）。

しかし、運がなかった。誰が私を正しい方向に向けさせますか？

htmlcssipadmobilefixed
18
JeremyE

問題は、おそらくテーブルの背景のサイズが変更されるためだと思うので、この宣言を追加すると、ほとんどの場合、問題なく実行できるはずです。

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アプリのjquery mobileで固定位置の背景画像を設定する方法

編集-2：

チェックできるフィドルを追加：

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

そして、これはあなたのiPadで試してみるためのリンクです：

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

7
Breezer

そのウェブサイトは、モバイルブラウザーでトリックを使用しており、その間background-attachment: fixed動作しない、position: fixedはそうするので、モバイルブラウザでは<div>これは、スクロールコンテンツの背後に固定されたままです。

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

        }

そして、「固定された背景」にbackground-positionの遷移を与える要素を与えると完了です。しかし、それはきちんとではありません....そして私はより良い解決策があるように感じます...しかしこれは動作します。

0
Sjerp van Wouden

1）z-index: -1;リンク画像がある場合はBreezerの2番目のアプローチに追加する必要があります。そうしないと、画像は（背景の後ろに）非表示のままになります。

2）同じアプローチで、次のようにコンテンツの残りの前にdivを配置する必要がありました。または、divタグ内にコンテンツが追加された場合、ページはスクロールできませんでした。

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

0
Rafael