Question

我已设置索引页面的整页背景图片。（PS：我在一个index.html中有多个页面 - 索引页面，关于页面，服务页面等）我希望这个图像只显示在索引页面上。其余页面应该有白色背景。

这是我的css代码：

.ui-page, #index .ui-content{
background: url(../images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
}

如果内容很短，我在其他页面上遇到的问题是，可以看到.ui-page的背景图片。如何仅将.ui-page分配给index.html页面？

Answer 1

将应具有背景的页面的页面ID添加到CSS规则：

 #page1.ui-page{
    background: url(http://lorempixel.com/1800/1800/abstract/2/) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size:100% 100%;
}

<强> DEMO

在演示页面1中有背景而page2没有。

.ui-page背景图片jQuery Mobile 1.4.3

1 个答案: