需要:在 Jquery mobile 中使用“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
[And] 在模拟器中编译
最佳答案
您的 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;
}
关于css - 如何在使用 data-role 属性时在 jquery mobile 中的 div 中显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14998158/