nat*_*ore 0 html javascript css jquery jquery-mobile
我试图用一个覆盖典型的jQuery Mobile背景.jpg.在我的生活中,我不能想到这一点.它让我疯了!我一直都在SO和谷歌对任何人的答案都无济于事.
我当前的标题信息
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
我的应用程序遵循的过程:
index.html 加载图片淡入.(这个CSS覆盖工作完美)$.mobile.changePage()另一个页面,而不是多页格式这是我的CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
任何人都有一些指示或知道我做错了什么？背景闪烁一瞬间,然后被抛出......
在此先感谢您的帮助!
首先,您需要在要设置为透明的CSS类之间使用逗号.接下来,由于ui-overlay-c也应用于身体,您可以将其背景图像与身体一起设置.
因此,首先设置透明度,然后设置正文背景:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
这是上面的一个工作小提琴:http: //jsfiddle.net/ezanker/5GgR9/
| 归档时间： |
|
| 查看次数： |
6494 次 |
| 最近记录： |