后台附件:修复了jquery mobile phonegap无法正常工作

时间:2014-03-05 13:43:59

标签: javascript jquery html css cordova

如何设置不与内容一起滚动的背景图像。我正在使用jquery mobile和phonegap。我尝试使用背景附件:固定,但图像不是全屏。

<div data-role="page" class="background">
</div>

我的css:

.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}

3 个答案:

答案 0 :(得分:4)

我不得不解决这个问题,周围的工作(据我所知它在iOS7中没有改变)是创建一个单独的div(称之为&#34;背景&#34; div) ,将其位置设置为固定,并在此div中插入所需的背景图像。

设置此div的z-index,使其位于内容的其余部分之下。

iOS webview会尊重固定定位的div而不是background-attachment: fixed;

在html文件的<body>内但在后续页面之外设置背景一次。

这是我如何做到的,而且效果非常好。

<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>

和css

.background {
    position: fixed;
    top: 0%;
    left: 0%;
    min-width: 100%;
    z-index: -10000;
}

答案 1 :(得分:0)

首先,你需要减少一半的CSS。从这开始:

.background {
  background-image: url(../images/bg.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

请注意,我已将background-attachment: scroll;更改为background-attachment: fixed;。 background-attachment的默认值是scroll,因此无论如何都不需要包含它,但这与您尝试执行的操作相反。

其次,您可以将bg.png上传到imgur或其他网站,以便我们能够更好地了解您的目标吗?还要在您的div中添加一些与实际内容长度相似的示例内容? 由于这是您网站的div而不是正文,因此除非中有内容,否则div会折叠,并且div会逐渐填充内容。

这意味着如果您设置 background-size:100%100%; ,您将把图片拉伸到div的内容;这不是你想要的。您只希望背景图像填充视口。设置background-attachment: fixed;可以完成此任务。

答案 2 :(得分:0)

您可以使用iscroll插件。 由jquery移动执行的页面由java脚本源代码执行,并且在css中更改的某些元素不起作用。