Question

需要：在Div标签内显示图像作为背景，同时在Jquery mobile中使用“data-role ='header'/ data-role ='footer'”。

代码：（样品）

 <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

[和]在模拟器中编译

Answer 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/

如何在使用data-role属性时在jquery mobile中显示div内的图像

1 个答案: