叠加效果不适用于背景答案

【问题标题】：Overlay effect is not applying for background叠加效果不适用于背景
【发布时间】：2019-07-20 21:56:42
【问题描述】：

我正在设计登录页面。尝试为登录表单应用黑色背景，但它没有应用。它显示表单容器 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>

【问题讨论】：

标签： html css angular7

【解决方案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>

【讨论】：

如果我删除绝对值，它会起作用。我想将表格放置在页面的确切中心。并且需要绝对值。
flex 是最好的选择，它可以确保您的表单位于屏幕中间，无论您处理什么屏幕尺寸。全屏运行代码，你会得到它。
为什么那个div的高度是0
这是因为你给了它 position:absolute 这使得 div “不尊重”正常流动。您无法计算具有绝对定位子级的父级高度。