一种在加载时淡入背景的方法? [英] A way to fade in the background on load?

问题描述

我正在做一个网站设计，我需要一种方法在 body 标签的背景图像完全加载完成后淡入淡出(可能会暂停 500 毫秒).

I am working on a website design, and I need a way to fade in the background image of the body tag when it is completely done loading (perhaps then a pause of 500 ms).

如果您看到 August 的网站设计，您会看到背景淡入；但是，这是使用 Flash 背景完成的.有没有办法用 jQuery 或 JavaScript 做到这一点?

If you see August's website design you will see the background fades in; however, this is done with a Flash background. Is there any way to do this with jQuery or JavaScript?

2010 年 9 月 19 日更新:

所以对于那些来自谷歌的人(这是目前加载时背景淡入淡出"的第一结果，我只是想为大家做一个更清晰的实现示例.

So for those that are coming from Google (this is currently the number one result for "fade in background on load", I just thought I'd make a more clear implementation example for everyone.

在页脚某处的代码中添加 <div id="backgroundfade"></div>(如果您不想要 DOM，也可以通过 JavaScript 附加它变得杂乱无章.

Add a <div id="backgroundfade"></div> to your code somewhere in the footer (you can also append this via JavaScript if you don't want your DOM getting cluttered.

风格本身 -

#backgroundfade {
  position: fixed;
  background: #FFF /* whatever color your background is */
  width: 100%;
  height: 100%;
  z-index: -2;
}

然后将其添加到您的 JavaScript 脚本文件(需要 jQuery):

Then add this to your JavaScript scripting file (jQuery required):

$(document).ready(function() {
    $('#backgroundfade').fadeOut(1000);
});

这具有在 DOM 完成后 1 秒内淡出 #backgroundfade 元素(覆盖"实际背景的框)的效果.

This has the effect of fading the #backgroundfade element (the box "covering" your actual background) out in 1 second upon DOM completion.

推荐答案

我自己没有这样做，但它可能会工作.

I haven't done this myself, but it might work.

我猜你可以设置背景图像，然后用一个黑色背景的大旧 div 遮盖它.然后使用这个 div 的不透明度来创建淡入淡出效果.这个黑色的 div 必须覆盖整个身体.

You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.

这篇关于一种在加载时淡入背景的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！