2

必要: Jquery モバイルで「data-role='header' / data-role='footer'」を使用し、Div タグ内の背景として画像を表示したい。

コード:(サンプル)

 <link type="text/css" rel="stylesheet" href="jquery.mobile-1.2.0.css"/>

<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>

<style type="text/css">
    #main_logo{     
        background:url(img/logo.png) no-repeat 0 0 #fff;
        background-attachment:fixed;
        background-position:center;
        color: #000;
        font-family: Arial, Verdana, sans-serif;
        margin: 0;
        padding: 0;
}
</style>
</head>

<body>
<div id="page" data-role="page" data-theme="c">

    <div id="header" **data-role="header"** data-theme="c">
        <div id="nav" data-role="navbar">
            <div id="nav_menu" data-role="none">
                Header
            </div>
        </div>  <!--- Nav Bar--->
    </div>  <!---header-->

    <div id="content" data-role="content" data-theme="c">
            Content Area.
        <div id="main_logo"> 

        </div>
    </div>  <!--content-->

    <div id="footer"  data-role="footer" data-theme="c">
        footer
    </div>  <!--footer-->
</div> <!--pageX-->

</body>

問題: 表示されない!

別の方法：これらの属性を無視すると、次のように正常に機能します

コード: (サンプル)

<link type="text/css" rel="stylesheet" href="jquery.mobile-1.2.0.css"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>

<style type="text/css">
    #**page**{      
        background:url(img/logo.png) no-repeat 0 0 #fff;
        background-attachment:fixed;
        background-position:center;
        color: #000;
        font-family: Arial, Verdana, sans-serif;
        margin: 0;
        padding: 0;
}
</style>
</head>

<body>
<div id="page" data-role="page" data-theme="c">

    <div id="header" >
        <div id="nav" data-role="navbar">
            <div id="nav_menu" data-role="none">
                Header
            </div>
        </div>  <!--- Nav Bar--->
    </div>  <!---header-->

    <div id="content" >
            Content Area.
        <div id="main_logo"> 

        </div>
    </div>  <!--content-->

    <div id="footer" >
        footer
    </div>  <!--footer-->
</div> <!--pageX-->

</body>

誰かが答えを持っている場合は、投稿してください！ありがとう ！！

注: フォルダ構造:

 root/
  ../index.php
  ../[all .css files]
  ../[all .js files]
  ../img/logo.png

[そして]エミュレータでコンパイル

4

1 に答える 1

1

div コンテナーには、幅と高さの寸法が必要です。

#main_logo{     
    background:url('http://puppy-training-classes.com/wp-content/uploads/2013/01/golden_retriever_puppy_cute_dog_muzzle_16591_256x256.jpg') no-repeat 0 0 #fff;
    background-attachment:fixed;
    background-position:center;
    color: #000;
    font-family: Arial, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 500px;
}

実際の例: http://jsfiddle.net/Gajotres/fFyF2/

于 2013-02-21T09:15:41.893 に答える