Question

所以，让我说我有一个类似

的HTML结构

<div class="outer">
    <div class="inner">
        <h1>Here's a headline</h1>
        <p>Here's some text</p>
    </div>
    <div class="inner">
        <p>Blah blah</p>
    </div>
</div>

并且我希望在将loading添加到outer时，gif https://www.wpfaster.org/wp-content/uploads/2013/06/loading-gif.gif覆盖整个内容。有没有办法用伪元素做到这一点？添加background-image的问题在于它在内部元素后面。

Answer 1

这应该非常接近你想要的。可能需要调整背景颜色。

<强> CSS：

@-webkit-keyframes firstLayer {
  from {
    width: 0px;
    margin-left: 0;
    margin-top: 0;
    height: 0px;
  }
  to {
    width: 400px;
    margin-left: -200px;
    margin-top: -200px;
    height: 400px;
  }
}

演示： https://jsfiddle.net/hopkins_matt/ac5jr5nq/

Answer 2

以下是一种方法：

.loading .inner { visibility: hidden; }

＆＃13;

.loading {
  background-image: url('https://www.wpfaster.org/wp-content/uploads/2013/06/loading-gif.gif');
  background-size: contain;
  background-repeat: no-repeat;  
}

.loading .inner { visibility: hidden; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner">
        <h1>Here's a headline</h1>
        <p>Here's some text</p>
    </div>
    <div class="inner">
        <p>Blah blah</p>
    </div>
</div>
<button onclick="$('.outer').toggleClass('loading')">Toggle</button>

＆＃13;

如何在不创建图像元素的情况下在元素上叠加图像？

2 个答案: