JQuery Mobile Theme 正在替换我在后台全局放置的 HTML 元素

Question

我正在更新一个旧元素，在此过程中我正在尝试将 JQuery 更新到最新版本。到目前为止，除了从 JQuery Mobile CSS 版本 1.0a3 更新到最新的 1.3.2(结构 + 主题)之外一切正常。

最新的 JQuery Mobile CSS 主题(不是结构)将默认背景放置在我想要全局显示的图像之上(这样图像就不会在页面更改时移动/淡出)。

我也不能只使用结构 CSS，因为主题 CSS 提供了跨页面顶部的漂亮导航。

这是一个 HTML 示例:

<!--display images in background-->    
<img id="background" src="http://www.placehold.it/50x50.png" />
<img id="corner-bottomright" src="http://www.placehold.it/50x50.png" />
<img id="corner-bottomleft" src="http://www.placehold.it/50x50.png" />
<img id="corner-topleft" src="http://www.placehold.it/50x50.png" />
<img id="title" src="http://www.placehold.it/500x50.png" />
<img id="navbar" src="http://www.placehold.it/50x100.png" />

<!--main page-->
<div data-role="page" id="page1" ontouchmove="touchMove(event);" style="padding:0px;height:100%;background-size:100%;">
    <div data-role="content" style="padding:0px;">
        <a href="#page3"><img id="corner-topright" src="http://www.placehold.it/50x50.png" /></a>
    </div>
</div>

<!--info page-->
<div data-role="page" id="page3" data-add-back-btn="true" ontouchmove="touchMove(event);" style="height:100%;background-size:100%;">
    <div data-role="header">
        <h1>Build Information</h1>
    </div>
    <div id="deviceinfo">
        <p>Your device information:</p>
        <p id="deviceProperties">Loading device properties...</p>
    </div>
</div>

JSFiddle using CSS 1.3.2

JSFiddle using CSS 1.0a3 (仅适用于 webkit)

这是否在某个时候被弃用了？解决此问题的最简洁方法是什么？

Answer 1

看起来像在显示背景的更高版本中添加了一些 CSS 类。使用 !important 标志将这些元素的 background 设置为透明可解决此问题。

.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
    background: transparent !important;
}

还有一个 JSFiddle showing how it should work .

我知道这个解决方案很草率，所以如果有人用更清晰的代码回答了这个问题，我会给你最好的答案。