0

我希望这个背景视频更暗，但尝试添加背景颜色没有奏效。.video-container video:before我还尝试使用 z-index创建一个伪元素，但没有任何改变。

我的另一个看法是该卡仅在 x 轴上响应，并且当屏幕从下方缩小时才被切断。我附上了一张图片来说明我的意思。这是我第一次使用引导程序，它让我失去了学习。

非常感谢。

编辑：我试过这个，但它不起作用：

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: no-repeat center center/cover;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
 
}

.video-container video:before {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    background: black;
}

[屏幕不适应高度变化

html,
body,
header,
.view {
    height: 100%;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: no-repeat center center/cover;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 
}

.video-container :before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: black;
}

.card {
    background-color: rgba(0, 162, 255, 0.199);
    height: 100%;
    position: relative;
    top: 50%;
}

  <header>
    <div class="view video-container">
      <video src="video/background.mp4" autoplay muted loop></video>
    </div>

    <div class="container">
      <div class="row pt-5">
        <div class="mx-auto col-xl-5 mb-4 mt-5 pt-5">
          <div class="card">
            <form>
              <div class="card-body">
                <div class="text-center">
                  <h3 class="text-white">
                    <strong>Login</strong>
                  </h3>
                  <hr />
                </div>

                  <div class="form-group">
                    <i class="fas fa-user text-white"></i>
                    <label class="text-white" for="name">Username</label>

                    <input
                    type="text"
                    id="name"
                    name="name"
                    class="form-control"
                    required
                    >
                  </div>

                  <div class="form-group">
                    <i class="fas fa-lock text-white"></i>
                    <label class="text-white" for="pass">Password</label>

                    <input
                    type="password"
                    id="pass"
                    name="pass"
                    class="form-control"
                    required
                    >
                  </div>

                  <div class="text-center mt-5">
                    <button name="submit" type="submit" class="myButton">
                      Login
                    </button>
                    
                    <a
                    href="#"
                    class="pt-5 text-white d-block"
                    style="font-size: 14px"
                    >
                    Forgot Password
                  </a>
                  <a
                  href="signup.html"
                  class="pt-5 text-white d-block"
                  style="font-size: 14px"
                  >
                  Don't have an account? Sign Up
                </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>
    
</body>
</html>
4

0 回答 0