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

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>

我想要 gif https://www.wpfaster.org/wp-content/uploads/2013/06/loading-gif.gif当类 loading 被添加到 outer 时覆盖整个东西。有没有办法用伪元素做到这一点？添加 background-image 的问题在于它位于内部元素的后面。

Answer 1

这应该非常接近您要查找的内容。可能需要调整背景颜色。

CSS:

.outer {
  position: relative;
}

.outer.loading:before {
  background: #fefefe url('https://www.wpfaster.org/wp-content/uploads/2013/06/loading-gif.gif') center no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

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