Html 网站启动时淡出动画

我想创建一个div，该div保存一个.gif文件，并在每次页面启动时显示（我将在用户会话中存储一个值，以便在登录后不会显示多次），然后淡出。我已经创建了一个div，但如果里面什么都没有，它就不会显示，即使我输入高度：100%；宽度：100%；。 以下是我目前的代码：

<style>
.fade {
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1111;
}
</style>

<div class="fade"></div>

.褪色{
宽度：100%；
身高：100%；
背景色：#000；
z指数：1111；
}

如果要覆盖所有屏幕，请始终添加固定位置，尤其是在显示此div时未禁用滚动的情况下

忘了上面和左边。这也很重要

此外，如果使用%，有时父子元素关系可能会弄乱宽度/高度。在这种情况下：

width: 100vw;
height: 100vh;

---

这意味着浏览器的视口高度和宽度。

Div

.fade

位于

主体中，位于
html
中。我们都知道，100%的零仍然是零。将这两个的高度也设置为100%：

body, html {
    height: 100%;
}

加上

.fade{
   min-width:100%;
   min-height:100%;
   background-color: #000;
   z-index: 1111;
   position:fixed;
}

同时添加top:0px和left:0px我忘记了一件事，并更新了我的答案，就像用户3091574所说的那样-还将top和left（或right）设置为0px。无。如果不输入一些内容，我就看不到div，即使这样，它也很小，而且没有背景。1）确保HTML和CSS中的类名相同2）确保两个类都不是ID为的类3）尝试宽度：100vw；高度：100vh；干杯快乐编码！添加了它，没有任何更改。它在JSFIDLE上工作，但在我的网站上不工作。为什么？@Lnvz奇怪，你在你的网站上看到了什么？有屏幕吗？试试z指数：999999；
.fade{
   min-width:100%;
   min-height:100%;
   background-color: #000;
   z-index: 1111;
   position:fixed;
}