web-dev-qa-db-ja.com

background-attachmentの使用：iPadのSafariで修正

人気の科学アプリに似た効果を再現したいと思っています。基本的に大きな背景画像が1つあり、その上にHTML/CSSレイヤーがあります。ユーザーがコンテンツをスクロールするとき、画像の背景位置はそのままで、スクロールしないでください。

明らかに「通常の」ブラウザでは、background-attachment：fixedを使用しますが、これはiPadでは機能しないようです。 position：fixedは、safari仕様に従って期待どおりに機能しないことはわかっていますが、これを達成する方法はありますか？

cssipadhtml
15
chris_bcn

このコードを使用して、この問題をハッキングする固定背景レイヤーを作成できます。

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('xx.jpg');
    background-attachment: fixed;
}

そして、置きます <div id="background_wrap"></div>から<body></body>

<body>
<div id="background_wrap"></div>
</body>
14
Angolao

モバイルサファリは、サイト全体を背景画像を含むビューポートサイズに縮小します。正しい効果を得るには、-webkit-background-size CSSプロパティを使用して背景サイズを宣言します。

-webkit-background-size: 2650px 1440px;

（コメント投稿者へのヒント Mac ）

3
codewrangler

上記のAnlaiの回答を拡張すると、解決策は、画像を固定したままにするのではなく、スクロールするときに私の画像を繰り返すことであることがわかりました。他の誰かがこの問題を抱えていた場合、background_wrap IDの私のCSSは次のとおりです。

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

背景サイズと背景添付ファイルを変更して、画像を静的にしました。

2
lg365

背景画像をdivに配置し、他のコンテンツの背後に表示されるようにz-indexを設定できると思います。その後、JavaScriptを使用して、背景画像を含むdivの位置を修正できます。

1
Alexander

Ig365と同様に、アンゴラオのソリューションは画像の比率に応じて画像の繰り返しを引き起こすことを発見しました。ただし、Ig365の画像はbackground-fixedの配置を模倣していません。これを行うには、background-position-x: 50%;を追加します。 （画像のサイズによっては、background-position-y: 50%も必要になる場合があります。）

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    background-position-x: 50%;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('imageURL');
    background-repeat: no-repeat;
}
0
Andy

私はそれほどプロフィではありませんが、jqueryを使用してこの問題を解決しました。それは非常に簡単です）ここにコードがあります：

        jQuery(window).scroll(function(){
                var fromtop = jQuery(window).scrollTop();
                jQuery(" your element ").css({"background-position-y": fromtop+"px"});
        });
0
John