每个页面的自定义背景图像
我正在使用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?
每个页面类例如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);
}
该选项可能会产生比您可能解决的问题更多的问题。请注意,具有大背景图像的这种解决方案可以正常工作,但会增加加载时间。 – 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;
每个的头部施加一个'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