加载页面和覆盖

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%，你只需要设置顶部和左边的属性，所以在代码片段中我集中了一个加载 gif 只是为了向你展示class 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/>

加载页面和覆盖

Loading page and Overlay

html

javascript

css

overlay