具有css高度的闪屏100％不起作用

Question

我有这样的闪屏。

HTML

<div id="spalsh">
  <span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span>
</div>

CSS

#spalsh{
    width: 98%;
    height: 100%;
    background: rgba(252, 252, 252, 0.67);
    z-index: 10000;
    position: absolute;
    margin: 0px;
    padding: 0px;
}
#spalsh span{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 60px;
}

如果页面高度动态增加，则启动画面不会覆盖全高。我想覆盖整个页面的高度。有没有JS的PURE CSS有什么解决方案吗？

添加图片：

Answer 1

如果我理解正确，你想制作一个覆盖屏幕的飞溅图像？

尝试将div spalsh（不应该是启动？）作为背景覆盖背景。

.spalsh { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Tutorial

这应该会使spalsh中的背景图片随浏览器调整大小。

另外，我真的会将其重命名为splash