html - 叠加效果不适用于背景

Question

我正在设计登录页面。尝试为登录表单应用黑色背景，但它不适用。它显示表单容器 0 的高度。这就是它不应用的原因。如果我手动提供高度，它会起作用。以前对于其他表单覆盖效果很好。

.form-container {
  opacity: 0.9;
  background: #000000;
  /* background-color: rgba(0, 0, 0, 0.6); */
  z-index: 2;
}

.form-content {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 1px 1px 14px 6px #f3f1f1;
  border: 1px solid #f3f1f1;
  padding: 50px;
}

<div class="form-container">
  <div class="form-content">
    <form>
      <div class="form-control">
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" />
        </mat-form-field>
      </div>

      <div class="form-control">
        <mat-form-field>
          <input matInput type="password" placeholder="password" />
        </mat-form-field>
      </div>

      <div>
        <button mat-flat-button color="primary">Log In</button>
      </div>
    </form>
  </div>
</div>

Answer 1

尝试使用 flex display: flex; 并回答您关于为什么 form-container 高度为 0 的问题 -> 这是因为它里面的内容被赋予了 position:absolute 使它像一个没有任何内容的 div。

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}

.form-container {
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.form-content {
    width: 250px;
    box-shadow: 1px 1px 14px 6px #f3f1f1;
    border: 1px solid #f3f1f1;
    padding: 50px;
    background: #000;
}

<div class="form-container">
  <div class="form-content">
    <form>

      <div class="form-control">
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Email">
        </mat-form-field>
      </div>

      <div class="form-control">
        <mat-form-field>
          <input matInput type="password" placeholder="password">
        </mat-form-field>
      </div>

      <div>
        <button mat-flat-button color="primary">Log In</button>
      </div>

    </form>
  </div>
</div>