html - 动态更改 jQueryMobile html5 应用程序中的背景图像

Question

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

在我的通用 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 或类设置一个容器 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>