Javascript 固定div作为移动设备的背景
我想使用Javascript 固定div作为移动设备的背景,javascript,jquery,css,mobile-devices,Javascript,Jquery,Css,Mobile Devices,我想使用div作为网站的背景 如果我使用position:fixed并将宽度和大小设置为视口大小，则设计会在移动设备/平板电脑上中断，因为它们不支持固定位置 将div设置为静态背景的最佳方法是什么，这样它也可以在移动设备上工作？我不完全确定您打算如何使用背景，但我创建了一种宽松的方法来实现这一点。粘性背景应用于屏幕大小的div，它不会移动（只要你小心放在里面的内容）。然而，同样的效果也可以通过在身体上直接使用样式来实现——我不确定你到底需要div做什么，所以我不能保证这种技术会适用于你的用例 工
divposition:fixed将div设置为静态背景的最佳方法是什么，这样它也可以在移动设备上工作？我不完全确定您打算如何使用背景，但我创建了一种宽松的方法来实现这一点。粘性背景应用于屏幕大小的div，它不会移动（只要你小心放在里面的内容）。然而，同样的效果也可以通过在身体上直接使用样式来实现——我不确定你到底需要div做什么，所以我不能保证这种技术会适用于你的用例 工作原理 有了免责声明，下面是关于它如何工作的一些细节。所有内容都必须出现在两个div中：一个外部div具有背景，另一个内部div容纳所有内容。外部的设置为页面的大小，可以应用背景。然后将内部溢出设置为父对象的大小，并将所有溢出设置为滚动。由于外部没有滚动条，任何超过背景标记大小的内部内容都会导致滚动条显示在整个页面上，而不仅仅是其中的一部分。实际上，这会在“content”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>
#背景{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
背景图片：url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
边际：0px；
填充：0px；
溢出：隐藏；
}
$（“正文”）。前缀（“”）；
$（文档）.on（“滚动”，函数（）{
$（“#bg”）.css（“top”，$（document.scrollTop（））
.css（“left”，$（document）.scrollLeft（））；
});
相应地修改后台div的样式规则，您应该会做得很好。它不会有一个好的帧速率，因为它总是在滚动绘制之后出现，但是如果您对文档结构和样式的其余部分几乎没有控制权，那么您的选项就太少了。您不必使用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>
我不能在包装中添加网页的内容，因此在我的情况下，我不能使用
#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%;
}