背景附件：修复了在 jquery mobile phonegap 中不工作的问题答案

【问题标题】：Background-attachment: fixed not working in jquery mobile phonegap背景附件：修复了在 jquery mobile phonegap 中不工作的问题
【发布时间】：2014-03-05 13:43:58
【问题描述】：

如何设置不随内容滚动的背景图像。我正在使用 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%;
}

【问题讨论】：

首先，您需要确保这个“背景” div 将成为您网站其余部分的容器，否则它将无法作为整个网站的背景。其次，如果第一种情况为真（确实如此），为什么不在标签中使用该 CSS 而不是
？
我尝试使用它，但仍然没有运气。我在 phonegap 中使用 jquerymobile。当我在 body 中使用 css 时，图像在那里，但仍然不固定。
图像是否显示？您能否发布一些到目前为止您尝试过的代码（HTML 和 CSS，以及任何相关的 jQuery），以及什么——确切地说——不适合你？
是的，图片出现了，pastebin.com/0c4BjK8Q 上面是 css。问题是，图像一直被拉伸到内容的长度。我只需要在滚动内容时将其固定为屏幕大小。
我添加了一个我认为可能有用的答案。让我们根据需要将评论讨论移到那里。

标签： javascript jquery html css cordova

【解决方案1】：

我必须解决这个问题，解决方法（据我所知，它在 iOS7 中没有改变）是创建一个单独的 div（称为“背景”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;
}

【讨论】：

这非常好用。打算将它部署到 iOS，如果它在那里工作，你就是我的英雄。
应该可以，让我知道。如果不是，我会仔细检查我的代码并更新答案，但我仍在 iOS 8.x 中成功使用它

【解决方案2】：

首先，您需要剪掉一半的 CSS。从这个开始：

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

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

其次，您能否将 bg.png 上传到 imgur 或其他网站，以便我们更好地展示您正在尝试做的事情？并且还用一些与您的实际内容长度相似的示例内容填充您的 div？ 因为这是一个 div 而不是您网站的主体，所以 div 会被折叠除非里面有内容，并且 div 会增长以填充内容。

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

【讨论】：

这是imgur.com/lDU0lXZ 的图像，我希望它在任何屏幕尺寸下全屏并固定。我上面的css实现全屏但不固定。将附件固定并删除另一个会使图像不适合。 pastebin.com/edLDj4i1 div 的示例内容。它始终可滚动，因为它将用作移动应用程序。
我仍然不相信我知道如何使用单个空（理论上）div 的背景和 CSS 来做到这一点。但是，由于您熟悉 jQuery，请查看 this jQuery method 以动态查找视口的高度并将 div 高度设置为等于该高度。那么也许您可以设置overflow: auto; 仅在必要时滚动内容。
另外，为您的背景图片和内容使用两个 div（或 body 和一个 div，最好）；查看此CSS Tricks 链接以获取有关使其工作的帮助。抱歉，我无法提供更多帮助！

【解决方案3】：

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

【讨论】：