html - 背景图像未显示在 jquery 移动页面中

Question

我正在使用 jQuery 移动版。我最初尝试使用 html{background: url("bg.png") repeat fixed 0 0;} 设置背景图片，但没有成功，然后我尝试使用 body 标签

 body {background: url("bg.png") repeat fixed 0 0;}    

但是，如果我定义一个自定义类，比如 .myclass{background: url("bg.png") repeat fixed 0 0;} 然后在我的标签中使用它，它就可以正常工作。

我只是想知道为什么 body 或 html 标签不起作用？它是被覆盖了还是什么？有什么想法吗？

Answer 1

由于 jQuery Mobile 独特的页面处理方式，您将无法看到主体容器的更改。每个可见页面都有一个更大的 z-index 并且它漂浮在正文上方。

基本上，您对 body css 的更改是正确的，但它们不会显示。

你要做的是改变这个类:.ui-page。这是每个 jQuery Mobile 页面的基类。

每个自定义更改都必须使用 !important 覆盖经典 CSS。

像这样:

.ui-page {
    background: url('http://subtlepatterns.com/patterns/escheresque_ste.png') repeat scroll 50% 50% #112233 !important;
    color: #aabbcc !important;
}  

这是一个有效的 jsFiddle 示例:http://jsfiddle.net/Gajotres/u3E6K/