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

【问题标题】：background image disappear because of left-panel由于左侧面板，背景图像消失
【发布时间】：2014-01-06 04:26:05
【问题描述】：

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

我不确定，我应该将代码发布给您。这就是我背景的 CSS 代码：

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

【问题讨论】：

您可以通过编程方式将 bg img 添加到特定页面。创建一个类，在 pagebeforeshow/pagebeforehide 上添加/删除它。但是您仍然需要关注面板。

【解决方案1】：

在 jQuery Mobile 1.4 中，当第一次打开面板时，它会将 content div 包装在 .ui-panel-wrapper div 中。此 div 覆盖页面的 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

【讨论】：