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