Question

我有一个将加载图像作为背景图像的类：

.loader {
  background-image: url('loader.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

现在，此类在div中使用，该div也包含我的HTML元素的其余部分：

例如

<div class="lodaer"> 
...
 code for a form with many inputs or any other random code
...
</div>

现在，当应用此类时，图像位于输入框和其他元素下方。但是，我的目的是向用户显示表单顶部的加载程序，并且表单的不透明度较低，这表明正在获取表单数据。

那么，如何使图像位于其他元素之上？ TIA

Answer 1

无法将background-image放在内容上方。在这种情况下，也许"before"或"after"选择器可以为您提供帮助。

我个人会使用另一个div，其内容位于内容上方，position: absolute。像这样：

.loader-img{
    position: absolute;
    top: 0;
    width: 30%;
    height: 50px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Big_%26_Small_Pumkins.JPG/1024px-Big_%26_Small_Pumkins.JPG);
}

<div class="yourDiv"> 
  ...
   code for a form with many inputs or any other random code
  ...

  <div class="loader-img"></div>
</div>

Answer 2

就是这样。除非您的情况如此，否则将css：after替换为loader div上的图像作为背景，作为背景。

@keyframes spin { to { transform: rotate(360deg); }}

section {
  position: relative;
  margin: 1rem;
  padding: 1rem;
  border: gray 3px solid;
}

.loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.7);
  border: red 1px solid;
}

.loader:after {
  content: '';
  position: absolute;
  height: 3rem;
  width: 3rem;
  border: silver 5px solid;
  border-top: red 5px solid;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

<main>

  <section>
    <h1>test</h1>
    <p>blah blah blah blah blah blah blah</p>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div class="loader"></div>
  </section>
  
  <section>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div class="loader"></div>
  </section>

</main>

将背景图片置于div上方

2 个答案: