时间戳

首页 > 解决方案 > 背景图像覆盖整个屏幕但有一个奇怪的边距

html - 背景图像覆盖整个屏幕但有一个奇怪的边距

问题描述

我定义了一个 div 来在背景中设置一个图像以覆盖整个屏幕。但是有一个奇怪的边缘，我无法摆脱。

我查看了代码，发现没有任何迹象表明我已经设置了这些边距。当在 css 类中将位置设置为固定时，图像是这样的：

位置：固定

但是当我没有将位置设置为“固定”时，它看起来像这样：

位置：相对

app.component.html

<main>
    <router-outlet></router-outlet>
</main>

login.component.html

<div class="back">
<form action="" method="post" class="form">
    <img src="../../../assets/toolbar_logo_blue.png" alt="logo" style="width: 100%;max-width: 500px">

  <div class="container">
    <label><b>Email</b>
    <input type="text" placeholder="Digite seu email" name="uname" required>
    </label>
    <label>
      <b>Senha</b>
    <input type="password" placeholder="Digite sua senha" name="psw" required>
    </label>
    <button type="submit" class="loginbutton">Logar como: <h4 style="display: inline-block; color: darkcyan;padding: 5px"> Clínica</h4></button>
    <div>
    <label class="switch">
      <input type="checkbox" checked="checked" name="type">
      <span class="slider round">
    </span>
    </label>
    </div>
  </div>
</form>
</div>

login.component.css

.form {
  background-color: transparent;
  border: #2196F3;
  padding: auto;
  margin: auto;
  justify-content: center;
  width: 50%;
  display: block;
  height: 50%;
  text-align: center;
  clear: both;

}

.back {
  background: url("../../../assets/background_paper.jpg")  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
}


/* Add padding to containers */
.container {
  padding: 16px;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.container2 {
  background-color: rgba(0, 3, 115, 0.21);
  float: right;
  text-align: center;
}

.loginbutton {
  background: cornflowerblue;
  opacity: 0.8;
  border-radius: 10%;
  /*width: 10%;*/
  color: black;
  /*height: 10%;*/
}

我知道我稍后会外包的内联样式。

标签： htmlcssangulartypescript

解决方案

事实证明，我现在只是将边距设置为 -8px，它就成功了。使用 chrome 开发人员工具，我发现它是 html 元素中 8px 的边距集，但我找不到它在代码中声明。感谢您的回答和评论。

推荐阅读