Question

我希望在此表单上方创建一个红色叠加层，并使其具有一定的不透明性，并且加载程序显示在中间。 loader类显示载荷，overlay类用于叠加层。

.overlay {
  background: red;
  opacity: 0.5;
  position: absolute;
}

.loader {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <form>
      <div class="overlay"></div>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

</body>

Code snippet also available on JSFiddle

Answer 1

这是我更改的内容，告诉您这是否是您想要的：

https://jsfiddle.net/f1m7ej2u/3/

HTML：

<form>
    <div class="overlay">
        <div class="loader">
        </div>
    </div>
....
</form>

CSS：

form {
    position:relative;
}

.overlay {
    background: red;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    z-index:2019;
}

如何在此表单上创建叠加层

1 个答案: