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>

叠加效果不适用于背景

1 个答案: