正在加载页面和叠加层

时间:2015-11-29 23:19:08

标签: javascript html css overlay

我正在使用此代码激活覆盖所有页面的叠加层:

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

但不行。哪里错了?

1 个答案:

答案 0 :(得分:2)

看到片段,我想你只需要将宽度和高度设置为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;