每个页面的自定义背景图像

我正在使用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;

它工作正常，但所有页面上都出现相同的背景图像。

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

来源

2014-11-25 Damian

每个的头部施加一个'style'块页面并设置具体背景 – fcalderan 2014-11-25 11:03:08

您可以在每个页面上添加不同的页面背景.ui-page { background：url（images/bgimage.jpg）no-repeat left top; background-size：100％100％; } – Ved 2014-11-25 11:09:16

每个页面类例如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

来源

2014-11-25 11:13:40 Omar

该选项可能会产生比您可能解决的问题更多的问题。请注意，具有大背景图像的这种解决方案可以正常工作，但会增加加载时间。 – Leon 2014-11-25 11:26:09

@Leon注意到，一旦框架初始化，jQuery Mobile页面（div）就在DOM中。但是，只有一个页面（div）是可见的，其余的都是隐藏的。这是_Multi-Page Model_的情况。在_Single Page Model_中，外部页面通过Ajax加载，DOM中只有2个页面。所以它不是CSS解决方案就是JS解决方案。 – Omar 2014-11-25 11:36:11

刚刚看到了jQuery Mobile的一部分 - 你说得对，我的不好。 – Leon 2014-11-25 11:43:13

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

页面1

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

页2

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

来源

2014-11-25 11:09:08

每个页面的自定义背景图像

回答

相关问题