Загрузки страница и Overlay

Question

Я использую этот код для активного оверлея, который будет охватывать всю страницу:

<div class="overlay"> 
    <img src="http://i.imgur.com/KUJoe.gif"> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('.overlay').fadeOut(); 
    }); 
    </script> 

И я добавили в style.css:

.overlay{ 
    position:fixed; 
    z-index:99999; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    background:rgba(0,0,0,0.9); 
    transition: 1s 0.4s; 
} 

Но не работы , Где я не прав?

Answer 1

Смотрите фрагмент, я думаю, вам просто нужно установить ширину и высоту на 100%, и вам просто нужно установить верхнюю и левую опору, поэтому в фрагменте i централизовать загрузку gif просто, чтобы показать вам класс overlay работающих.

.overlay{ 
 
    position:absolute; 
 
    background-color: rgba(0,0,0,0.5); 
 
    top:0; 
 
    left:0; 
 
    width: 100%; 
 
    height:100%; 
 
} 
 
.overlay>img{ 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    width:70px; 
 
    height:70px; 
 
}

<div class="overlay"> 
 
    <img src="http://gifyo.com/public/img/loading.gif"/> 
 
</div> 
 
<h2>Test<h2/>