背景-附件:修复了jquery mobile phonegap无法工作的问题

Question

如何设置不随内容滚动的背景图像？我使用的是jquery mobile和phonegap。我尝试使用background-attachment: fixed，但图像不能全屏显示。

<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%;
}

Answer 1

我不得不解决这个问题，解决这个问题的办法(据我所知，它在iOS7中没有改变)是创建一个单独的div (称为“背景”div)，将其位置设置为固定，并在这个div中插入您想要的背景图像。

设置此div的z索引，使其位于其余内容的下方。

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;
}

Answer 2

首先，你需要剪掉一半的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会增长以填充内容。

这意味着如果你设置了-size:100%100%；，你将会把图像拉伸到div的content；这不是你想要的。您只希望背景图像填充视口。设置background-attachment: fixed;可以实现这一点。

Answer 3

你可以使用iscroll插件。网页在jquery移动执行的java脚本源代码，并在css中更改的一些元素不起作用。