我有一个带有平铺背景身体图像的网页。它需要平铺,因为设计人员希望它可以随浏览器窗口扩展。它创建了一个非常特定的网格,在该网格上设计了网站的其余部分。
由于设计者希望使图案远离浏览器两侧,因此它周围还有一个白页边框(通过具有较高z索引的单独的div创建)。
我需要完全淡化下面的页面。当我尝试淡入体内时,屏幕从那里已经存在的图案开始。在玩游戏时,我还设法使背景逐渐淡入,但随后其他所有东西都逐渐淡出。我也尝试过将bg模式放置在主体下方的div中,但在Safari中似乎做得很奇怪。
我也尝试了以下教程,但无济于事:
http://blog.anselmbradford.com/2009/08/28/how-to-add-a-simple-webpage-fade-in-effect-using-jquery/
然后我的想法是以某种方式建立一个白色的div覆盖所有内容,然后逐渐消失。但是,如何使该div覆盖所有内容,包括人体背景图片?
我觉得我在这里错过了大事...
这是我正在使用的相关代码:
HTML:
<body id="home">
<div id="pgborder"></div><!-- end #pgborder-->
<div id="main">
<ul id="nav">
<li><a href="us.html">us</a></li>
<li><a href="work.html">work</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div><!-- end #main-->
<div id="logo">
<a href="home.html"><img src="images/logo.gif" width="345" height="24" alt="manuchugh logo"/></a>
</div><!-- end #logo-->
</body>
CSS:
html, body {
height: 100%;
font-family: "century gothic", arial, sans serif;
color: #8c8d8d;
font-size: 15px;
overflow: auto;
background:#fff url('../images/bg.gif');
}
#pgborder {
border: 22px #fff solid;
}
最佳答案
我想它不会褪色,因为您还将背景图像也应用于html
。
尝试从html, body {
删除以下行
background:#fff url('../images/bg.gif');
并将其放在CSS中的
body
选择器中:body {
background:#fff url('../images/bg.gif');
}
关于jquery - 需要淡入加载网页的全部内容,但平铺的bg模式保持相反的效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3560239/