动态更改jQueryMobile html5应用程序中的背景图片

Question

我有一个带有不同HTML页面的jQueryMobile应用程序。只有第一页包含对CSS文件的引用，因为任何其他页面都不会在jQueryMobile中加载标题。

在我一般的style.css文件，我设置背景图片那样：

.ui-page { 
    background: transparent url(../img/iOS/backgroundBanner.jpg); 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .ui-page { background-image: url(../img/iOS/backgroundBanner-2x.jpg); 
    -webkit-background-size: 320px 480px; 
} 

这一工程，但...我们如何在一个特定的页面更改背景图片？

谢谢！

Answer 1

您可以在每个页面上使用不同的id或class来创建容器div，并更改特定div的背景.onClick（）。

实施例：

<style> 
.home { 
    background: transparent url(../img/iOS/home_background.jpg); 
} 
.about{ 
    background: transparent url(../img/iOS/about_background.jpg); 
} 
</style> 
<div class="home">Home Page</div> 
<div class="about">About Us</div>