0

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

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

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

4

2 回答 2

1

我不完全确定您打算如何使用背景，但我在这里创建了一种松散的方式来执行此操作。俗气的背景应用于屏幕大小的 div，并且它不会移动（只要您小心放入其中的内容）。然而，同样的效果可以通过直接在 body 上的样式来实现——我不确定你到底需要 div 做什么，所以我不能保证这种技术适用于你的用例。

这个怎么运作

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

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

使用 jQuery

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

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

<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的样式规则，你应该很好。它不会有很好的帧速率，因为它总是在滚动绘制之后出现，但是如果您对文档结构和样式的其余部分控制得很少，那么您的选项就会不足。

于 2013-02-13T23:02:35.980 回答
0

您不必使用 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%;
}
于 2017-04-12T04:28:06.907 回答