0

典型的な jQuery Mobile の背景を.jpg. 私の人生では、これを理解することはできません。それは私を夢中にさせています！私はSOとGoogleのいたるところにいましたが、誰の答えも役に立ちませんでした。
現在のヘッダー情報

<head>
    <title>Veolia Water Splash Guide</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
    <link rel="stylesheet" href="./css/stylo.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="./js/main.js"></script>
</head>

私のアプリケーションが従うプロセス：

  1. index.html画像がフェードインすると読み込まれます (この CSS オーバーライドは完璧に機能します)。
  2. 画像がフェードインした後、マルチページ形式ではなく$.mobile.changePage()、別のページに変換します
  3. ここで失敗し、バックグラウンドが読み込まれますが、何かによって上書きされます。何がそれをオーバーライドしているのか理解できないようです。

これは私のCSSです

#logo
{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
}

body
{
    background: url('../img/background.jpg') !important;
    background-repeat:repeat-y !important;
    background-position:center center !important;
    background-attachment:scroll !important;
    background-size:100% 100% !important;
}

.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
    background: transparent !important;
}

誰かがいくつかの指針を持っているか、私が間違っていることを知っていますか? 背景が一瞬点滅しますが、その後放り出されます...

助けてくれてありがとう！

4

1 に答える 1

8

まず、透明に設定する CSS クラスの間にコンマが必要です。次に、ボディにも ui-overlay-c が適用されているので、ボディと一緒に背景画像を設定できます。

一緒に、最初に透明度を設定し、次にボディの背景を設定します。

.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
    background: transparent !important;
}

body, .ui-overlay-c
{
    background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
    background-repeat:repeat-y !important;
    background-position:center center !important;
    background-attachment:scroll !important;
    background-size:100% 100% !important;
}

上記のフィドルは次のとおりです。 http://jsfiddle.net/ezanker/5GgR9/

于 2013-10-14T13:29:10.873 に答える