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或类创建容器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>

在jQueryMobile html5应用程序中动态更改背景图像

1 个答案: