0

基本的に、背景色（または画像）を設定しようとしています。HTML CSS と JQuery Mobile で書いています。

基本的な AppMobi アプリを作成しようとしていますが、次の例では背景を変更できないようです:

    <div data-role="page" id="page">
    <div data-role="header" data-theme="c">
        <h1>Page One</h1>
    </div>
    <div data-role="content" data-theme="c">    
        <ul data-role="listview" data-theme="b">
            <li><a href="#page2">Page Two</a></li>
            <li><a href="#page3">Page Three</a></li>
            <li><a href="#page4">Page Four</a></li>
            <li><a href="#page3" data-role="button" data-icon="delete">Delete</a></li>
        </ul>       
    </div>
    <div data-role="footer" style="position:fixed; bottom:0;" data-theme="c">
        <h4>Page Footer</h4>
    </div>
</div>

HTMLとCSSの両方で背景を変えてみたのですが、背景色のページ1(例)が変えられないようです。ページ 1 には、4 つのボタンと「スティッキー フッター」が含まれています。ボタンは画面上部に表示されますが、ボタンまたはリストとフッターの間のコンテンツは色が変わりません。ヘッダーとインラインに HTML や CSS を書いてみました。

この「div」チャンクの背景色を変更するにはどうすればよいですか?

事前にサンクス

4

2 に答える 2

1

あなたの問題はAppMobiに関連していませんが、一般的にJQueryMobileに関連しています。

JQuery Mobileの仕組みは、コンテンツをロードしてから「処理」し、スタイルを適用することです。何が起こっているのかというと、JQueryMobileがデフォルトのCSSスタイルを上書きしているということです。JQuery Mobile CSSファイルを開き、そこで変更します。

于 2011-10-02T23:28:10.957 に答える
0

標準のサンプル アプリでは、背景を設定する index.html のコード ブロックを次に示します。

/* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }

これは、画像ディレクトリにある background.jpg というタイトルの画像を設定するだけです。その背景画像を編集するか、新しい画像を取得してそれを指すか、気の利いた Webkit コードまたは何かを挿入することができます: (index.html の head タグ)

<style type="text/css">
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 8); }
        input, textarea  { -webkit-user-select:text; } 
        body  
        {
            font-family:Arial;font-size:24pt;font-weight:bold;  
            background: 
            -webkit-gradient(radial, 50% 60%, 0, 53% 50%, 50, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.15)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 40% 50%, 0, 40% 55%, 25, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8D4212), to(#28580C), color-stop(.5,#DA881B));
            background-size: 400px 400px, 470px 470px, 600px 600px, 300px 300px, 100% 100%;
            background-color: #28580C;
        }
    </style>

したがって、ページ 1 の div に ID を指定し、その div ID に画像または必要なものを適用するだけです。

于 2011-09-30T14:17:53.650 に答える