Question

我正在使用Android上的Cordova + jQuery Mobile开发混合移动应用程序。我有两个html页面，它们有不同的图像作为背景。我使用以下代码来设置页面背景：

 .ui-mobile .ui-page {
     background : transparent;
 }
 body.ui-mobile-viewport {
     background : url(img/homescreen.png) no-repeat center center;
 }

在这种情况下，第二页具有第一页背景和完全相同的相同代码的问题不会覆盖其背景。

在第二种情况下，我尝试使用特定ID来分配背景：

#firstpage{
    background: transparent url(img/first.png) no-repeat center center;
}
#secondpage{
    background: transparent url(img/second.png) no-repeat center center;
}

第二种情况下的问题是只有第一页有背景而第二页有空白颜色。页面本身具有以下结构：

<body>
    <div data-role="page" id="firstpage">
        <div class="ui-content" role="main">
            <div class="ui-grid-a"> <!-- two column grid -->
                <div class="ui-block-a">  
                     <a href="secondpage.html"></a>
                </div>
            </div>
        </div>
    </div>
</body>

第二个几乎一样。有关如何解决此问题的任何建议吗？

修改在JSFiddle上一切正常：http://jsfiddle.net/5o75shsw/ 可能是因为两个页面都在同一个html文档中。

jQuery Mobile页面具有不同的背景图像

0 个答案: