19

コンテンツが上に「浮かぶ」フルイメージの固定背景を持つ Web サイトがあります。デスクトップブラウザでは問題なく動作しますが、固定された背景は iPad やその他のタブレットでスクロールしてしまいます。これは一般的な問題のようですが、iPad でも背景が固定されているように見えるこの Web サイトに出くわしました。

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

編集：

これが機能しない場合、私が考えることができる他の理由は、iosがボディサイズをコンテンツと同じくらい大きくするために何らかの方法でサイズを変更する必要があるということです。その後、ボディタグ内に正しいプロパティで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

于 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 に答える