Question

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

如果我使用position:fixed并设置宽度＆amp;尺寸与视口尺寸相同，设计在移动设备/平板电脑上断开，因为它们不支持固定位置。

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

Answer 1

我不完全确定你打算如何使用背景，但是我创建了一个松散的方法here。俗气的背景应用于屏幕大小的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的样式规则，你应该是好的。它不具有良好的帧速率，因为它总是出现在滚动绘制之后，但是如果你对文档结构和样式的其余部分几乎没有控制权，那么你的选项就会很少。

Answer 2

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

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

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

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

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

2 个答案:

如何运作

使用jQuery