正在加载页面和叠加层

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，只是为了向你显示这个类{ {1}}工作。

＆＃13;

＆＃13;

overlay

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;