如何设置不与内容一起滚动的背景图像。我正在使用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%;
}
答案 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
中更改的某些元素不起作用。