9

これは本当に私を困惑させます。pic.jpgをバックグラウンドで静的にし（スクロール時に移動しない）、伸びないようにしたい。

Android上のChromeを除くすべてのブラウザ（Chrome、Safari、Firefoxなど）で動作します（Androidの元のブラウザでも動作します）

body{
        background-color: transparent !important;
        background-image: url(<%= asset_path "pic.jpg" %>);

        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

Chrome for Androidは、pic.jpgがページ全体ではなく画面の半分上にあるようにレンダリングし、スクロール時に静止したままになりません。

jsfiddleで再現できません。また、Androidスマートフォンでデバッグしようとしましたが、何も役に立たないようです。

これは背景画像を作成する方法ではありませんか？

4

3 に答える 3

5

残酷になりたくないのですが、この問題は約4年前に報告されています

http://code.google.com/p/android/issues/detail?id=3301

最新の応答は私が推測するのに役立ちます：

Androidでの実験では、ボディ内の他のすべてのDIVがセンタリングを含めて正しく動作していることに気付いたので、画像を別のDIVに移動して機能しました。

面白いもの。

一番

于 2013-02-21T18:34:51.020 に答える
5

私は同様の問題を抱えています..そして私はこれでそれを修正します

html{
 height:100%;
 min-height:100%;
}
body{
 min-height:100%;
}
于 2014-03-26T19:37:38.707 に答える
0

Chrome for Androidで背景を正しく表示する回避策を見つけました。本文ではなく、htmlタグで背景を定義してください。これが新しいcssです：

html{
    background-color: transparent !important;
    background-image: url(<%= asset_path "pic.jpg" %>);

    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

はい、これは有効なマークアップです。私の経験では、バックグラウンドは他のすべてのブラウザでも正しく機能します。

于 2013-07-17T22:24:22.217 に答える