Question

我正在使用Jquery Mobile开发移动应用程序。我正在使用一个自定义主题，但想为不同的部分使用不同的页面背景图像。我目前正在使用此代码：

.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background: transparent !important;

background: url('images/bgimage.jpg') !important;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed !important;
background-size:100% 100% !important;

text-shadow: 0 0 0;

工作正常，但所有页面上都会显示相同的背景图片。

如何自定义每个页面以显示不同的背景图像，但仍然使用相同的主题，例如在我的情况下？

Answer 1

编辑：抱歉我误读了，我以为你是通过jquery进入img-urls的。这可能是要走的路。这样你就可以保持你的css清洁。用jQuery插入它。

第1页

 background: url('images/bgimage-p1.jpg') !important;

第2页

background: url('images/bgimage-p2.jpg') !important;

Answer 2

为每个页面添加一个类，例如custom1，custom2等

<div data-role="page" class="custom1">
</div>

<div data-role="page" class="custom2">
</div>

并为每个班级分配不同的背景

.ui-page-theme-a.custom1,
.ui-page-theme-a.custom1 .ui-panel-wrapper {
  background: url(custom1.png);
}

.ui-page-theme-a.custom2,
.ui-page-theme-a.custom2 .ui-panel-wrapper {
  background: url(custom2.png);
}

<强> Demo

每页的自定义背景图像

2 个答案: