我想使用div
作为网站的背景。
如果我使用CCD_ 2并设置宽度&大小到视口大小移动设备/平板电脑上的设计会中断,因为它们不支持固定位置。
将div设置为静态背景,以便它也能在移动设备上工作的最佳方法是什么?
我不完全确定您打算如何使用背景,但我在这里创建了一种松散的方法。俗气的背景应用于屏幕大小的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的样式规则,你应该会做得很好。它的帧速率不会很好,因为它总是出现在滚动绘制之后,但如果你对文档结构和样式的其余部分控制得太少,那么你的选项就太少了。
您不必使用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%;
}