启动屏幕与CSS高度100％不工作

问题描述：

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的解决方案？

添加图像： splash

为什么不尝试添加身高：100％的范围呢？ – 2014-09-22 08:01:17

您应该将图像高度设为100％。参见此处[http://*.com/questions/18164227/using-css-to-make-image-size-100-to-height-of-container][1] [1 ]：http://*.com/questions/18164227/using-css-to-make-image-size-100-to-height-of-container – Developer 2014-09-22 08:02:43

试过，没有成功.. :) – 2014-09-22 08:02:54

答

如果我理解正确的话，你想的屏幕覆盖开机画面？

尝试给出div spalsh（不应该是splash？）背景覆盖的背景。

.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

对不起，我的命名..;）我的图像是非常小的加载gif。您的解决方案使其成为全高GIF。即使在使用您的解决方案之后，它仍未覆盖整页高度。 – 2014-09-22 08:15:09

你可以设置一个JSfiddle或将它放在某个地方，以便我们可以使用你的代码？ – Rvervuurt 2014-09-22 08:29:32

试试这js小提琴http://jsfiddle.net/5eh1fh61/9/ – 2014-09-22 10:08:50

启动屏幕与CSS高度100％不工作

相关推荐