固定 div 作为移动设备上的背景答案

【问题标题】：Fixed div as background on mobile devices固定 div 作为移动设备上的背景
【发布时间】：2017-04-12 12:28:06
【问题描述】：

我想使用div 作为网站的背景。

如果我使用position:fixed 并将宽度和大小设置为视口大小，则移动设备/平板电脑上的设计会中断，因为它们不支持固定位置。

将 div 设置为静态背景以使其也适用于移动设备的最佳方法是什么？

【问题讨论】：

标签： javascript jquery css mobile-devices

【解决方案1】：

我不完全确定您打算如何使用背景，但我创建了一种松散的方式来做到这一点here。俗气的背景应用于屏幕大小的 div，并且它不会移动（只要您小心放入其中的内容）。但是，仅通过 body 上的直接样式就可以实现相同的效果 - 我不确定您究竟需要 div 做什么，所以我不能保证这种技术适用于您的用例。

工作原理

除了免责声明，这里有一些关于它如何工作的细节。所有内容都必须出现在两个 div 中：一个具有背景的外部 div 和一个包含所有内容的内部 div。外部设置为页面大小，并且可以应用背景。然后将内部的设置为父级的大小，并将所有溢出设置为滚动。由于外部没有滚动条，任何超过背景标签大小的内部内容都会导致滚动条出现在整个页面上，而不仅仅是在页面的一部分上。实际上，这会在“内容”div 内重新创建普通网页上的正文。

如果您对样式有任何具体问题，请告诉我，我会详细说明机制。

使用 jQuery

我想还有一个选择：使用类似的样式规则，但不能将所有内容嵌套在背景中，而是添加它，并在用户滚动时更改其位置，like so。

然后，只需注入以下代码：

<style>
#bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
</style>

<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
  $("#bg").css("top", $(document).scrollTop())
          .css("left", $(document).scrollLeft());
});
</script>

相应地修改背景div的样式规则，你应该很好。它不会有很好的帧率，因为它总是在滚动绘制之后出现，但是如果您对文档结构和样式的其余部分几乎没有控制权，那么您的选项就会不足。

【讨论】：

我无法将网页内容添加到包装中，因此在我的情况下我无法使用<div id=content>。我必须添加一个固定的 div 作为背景而不更改 HTML 结构中的任何其他内容。
平板上的jQuery解决方案太慢，我向下滚动后几乎一秒钟后出现背景。
那我相信你倒霉了。在这种情况下，JavaScript 永远不会很快；像这样以编程方式触发大规模重绘总是很慢。没有太多好的方法来处理像背景这样基本的事情。任何快速的解决方案都将依赖于 css，如果在这种情况下你没有能力影响页面范围的 DOM 结构或 css 样式，我已经在可能的解决方法上干了。
很奇怪，像固定 div 这样简单的事情不能只使用 CSS 来完成......
嗯，在大多数现代移动浏览器上都可以。这纯粹是向后兼容的问题。较旧的移动浏览器试图阻止您使用固定定位，因此很难做到这一点并不奇怪。可以在here 找到更彻底的讨论，但解决方法通常依赖于 JavaScript。您仍然可以通过设置主体样式来做到这一点 - 您在创建高性能变通方案方面的灵活性有限，这并不奇怪，现在您只需要决定最佳可用选项，即使它不完美。

【解决方案2】：

您不必使用 jquery。我只用 CSS 就能得到这个效果。

您将 div 设置在初始标记的正下方。然后将图像应用到 div 中的 html。同时给出 div 和 id 属性（在本例中为#background_wrap）。

...我在没有在 html 中应用实际图像链接的情况下尝试了此操作，但它从未正常工作，因为在将图像应用到 css 中的背景时，您仍然必须使用“background-image：”属性。让它在移动设备上运行的诀窍是不使用任何背景图像设置。这些值是特定于我的项目的，但它非常适合我的固定背景图像保持居中并响应移动设备以及更大的计算机视口。可能需要为您的特定项目稍微调整值，但值得一试！我希望这会有所帮助。

 <body>
     <div id="background_wrap"><img src="~/images/yourimage.png"/></div>
 </body>

然后在 CSS 中应用这些设置。

#background_wrap {
margin-left: auto;
margin-right: auto;   
}
#background_wrap img {
    z-index: -1;
    position: fixed;
    padding-top: 4.7em;
    padding-left: 10%; 
    width: 90%;
}

【讨论】：