在一个 jQM 元素上工作了很长时间,功能几乎完成了。现在在做UI。当我尝试为 jQM 页面设置全覆盖 CSS 图像背景时,它要么无法按预期工作。
我在这个问题上经常使用 google/stackoverflow。令我惊讶的是,没有官方文档,直接/简单的方法来解决这个问题。
许多建议适用于某些人而不适用于其他人(即使在支持的浏览器中也是如此)。对我来说,起初我无法获得 100% 的高度,然后在谷歌和其他程序员的帮助下,我可以获得 100% 的高度,但现在它在转换前后的背景会跳动。
这篇文章的问题是,是否有任何正确的方法/正确的方法、官方方法来设置 jQM 页面背景图像而没有所有问题?
我相信这种正确/适当/实际的方式可以帮助许多其他开发人员并使他们受益。
请指教,谢谢。
最佳答案
工作示例:http://jsfiddle.net/Gajotres/vds2U/51/
内容背景图片
HTML
<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>
CSS
#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 .
页面背景图片
CSS
.ui-page {
background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
background-size:cover;
background-repeat:no-repeat;
}
关于javascript - 在 jQM 中,为页面设置全屏 CSS 图像背景的正确/正确/实际方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23824757/