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 回答