每個頁面的自定義背景圖像

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

每個頁面的自定義背景圖像

回答

相關問題