经过一段时间的jQM项目,几乎完成了功能。现在正在开发UI。当我尝试为jQM页面设置完整的封面CSS图像背景时,它或者不能按预期工作。
我在这个问题上google / stackoverflow很多。令我惊讶的是,没有官方文档,直接/简单的方法来解决这个问题。
许多建议适用于某些人,而不适用于其他人(甚至所有人都支持浏览器)。对我来说,起初我无法达到100%的高度,然后经过一些谷歌和其他程序员的帮助,我可以获得100%的高度,但现在它在过渡前后的弹跳背景。
这篇文章的问题是,有没有正确的方法/正确的方法,官方的方式设置jQM页面背景图像没有所有的问题?
我确信这种正确/正确/实际的方式可以帮助并使许多其他开发人员受益。
请指教,谢谢。
答案 0 :(得分:1)
工作示例:http://jsfiddle.net/Gajotres/vds2U/51/
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content" id="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
#content {
padding: 0;
position: absolute !important;
top : 40px !important;
right : 0;
bottom : 0 !important;
left : 0 !important;
background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
background-size:cover;
background-repeat:no-repeat;
}
详细了解此解决方案 here 。
.ui-page {
background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
background-size:cover;
background-repeat:no-repeat;
}