需要在加载时淡出网页的全部内容，但平铺背景模式却不断做相反的事情
我有一个带有平铺背景主体图像的网页。它需要平铺，因为设计者希望它可以随浏览器窗口缩放。它创建了一个非常具体的网格，网站的其余部分都是在该网格上设计的。
它周围还有一个白色的页面边框（通过具有较高 z-index 的单独 div 创建），因为设计者希望使图案远离浏览器的两侧。
我需要将下一页全部淡化。当我尝试淡入正文时，屏幕会以已经存在的图案开始。在玩的过程中，我还设法让背景淡入，但其他所有东西都会淡出。我也尝试过将 bg 模式放置在 body 正下方的 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;
}
I have a webpage with a tiled background body image. It needs to be tiled because the designer wants it scalable with the browser window. It creates a very specific grid over which the rest of the site is designed.
There is also a white page border around it (created via a separate div with a higher z-index) because the designer wants to keep the pattern away from the sides of the browser.
I need to fade the following page in it's entirety. When I try to fade in the body the screen starts with the pattern already there. And while playing around I've also managed to get the background to fades in but then everything else fades out. I have also tried placing the bg pattern in a div just below the body, but it seems to do strange things in Safari.
I have also tried the following tutorial, but to no avail:
http://blog.anselmbradford.com/2009/08/28/how-to-add-a-simple-webpage-fade-in-effect-using-jquery/
My thought then is to somehow build a white div overlaying everything, then fading that out. But how do I make this div cover everything, including the body background image?
I feel like I'm missing something big here...
Here is the relevant code I'm working with:
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我想它不会褪色，因为您也将背景图像应用到
html。尝试从
html, body {中删除以下行，并将其与 CSS 中的
body选择器一起放置：I would imagine it not fading because you're applying the background image to the
htmlas well.Try removing the following line from
html, body {and placing it with a
bodyselector in the CSS: