0

iPhone/タブレットに表示されない背景画像があります! 面白いことに、ラップトップを使用していて、ウィンドウ サイズを iPhone/タブレットのサイズに設定しても、表示されます (サイトのサイズを変更してみてください)。

#intro {
background: url('imageurlhere') no-repeat right fixed;
background-color: #fdfdfd;
-webkit-background-size: 50% 125%;
-moz-background-size: auto 125%;
-o-background-size: auto 125%;
background-size: auto 125%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale')";
padding-top: 10%;
}

「固定」パラメーターを外すと表示されますが、視差はなくなります。

これを修正する方法はありますか？ありがとう！

4

1 に答える 1

3

問題は、コンビニエンス プロパティの position-y: fixed にありました。

iOS の Safari は認識しなかったfixedため、ルール全体を無視しました (添付のスクリーンショットを参照)。

ここに画像の説明を入力

削除する：

background: url(http://i.imgur.com/CVJVeWw.jpg) no-repeat right fixed;

代わりに追加します：

background-repeat: no-repeat;
background-size: auto 125%;
background-position-x: right;
background-position-y: fixed;
background-image: url(http://i.imgur.com/CVJVeWw.jpg);

を更新しbackground-position-y、background-attachment: fixed

私はこれでもう少し遊んで、あなたにとってもう少しうまく機能するかどうかを確認しました. background-attachment: fixed;iOS 6x で と の両方を指定すると、なぜかbackground-position-x: right;背景が抜けてしまう。ただし、視差は失われますが、画像表示にリセットbackground-attachment: fixed;することによって.initial

だから：デスクトップでこれを試してください：

#intro {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    background-image: url(http://i.imgur.com/rKJbwgL.jpg);
    background-color: #fdfdfd;
    -webkit-background-size: 110% 110%;
    -moz-background-size: auto 125%;
    -o-background-size: auto 125%;
    background-size: auto 110%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale')";
    padding-top: 10%;
    margin-right: -10%;
}

次に、電話/タブレットのメディア クエリで、background-attachment をリセットします。

background-attachment: initial;

それがあなたにとって少しうまくいくかどうか教えてください。

于 2013-08-18T19:52:35.507 に答える