我有一个带有平铺背景身体图像的网页。它需要平铺,因为设计人员希望它可以随浏览器窗口扩展。它创建了一个非常特定的网格,在该网格上设计了网站的其余部分。

由于设计者希望使图案远离浏览器两侧,因此它周围还有一个白页边框(通过具有较高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/

10-11 08:13