由于左侧面板，背景图像消失

Question

我有一个带左侧面板的jQuery移动应用程序。如果我点击面板，我的背景就会消失。

我不确定，我应该发布给你的代码。那是我背景的CSS代码：

[data-role=page] {
    background-image: url(../images/pattern.png);
    background-repeat: repeat;
}

Answer 1

在jQuery Mobile 1.4中，当第一次打开面板时，它会在.ui-panel-wrapper div中包装 content div。这个div会覆盖 page 的div背景。

当面板的data-display设置为push或reveal，而不是overlay时，会出现这种情况。

要解决此问题，请将background-image添加到[data-role=page]和.ui-panel-wrapper，然后!important以强制覆盖。

[data-role=page], .ui-panel-wrapper {
  background-image: url(../bg.png) !important;
  background-repeat: repeat;
}

  

<强> Demo