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/