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类。使用background标志将这些元素上的!important设置为透明可以解决问题。

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

和JSFiddle showing how it should work。

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

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

1 个答案: