Question

我想在CSS中设置完整尺寸的div，但它会保留设置的边距。

如您所见，我在html上设置的背景色仍然可见。如何避免这种情况并使div变大？

body,
html {
  height: 100%;
  background-color : red;
}

#front-bg {
  background-image: url('https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  height: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#front-bg h1 {
  color: white;
  font-size: 5em;
  width: 100%;
  position: absolute;
  bottom: 15%;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My site</title>
  </head>
  <body>
    <div id="front-bg">
      <h1>Stack Overflow</h1>
    </div>
  </body>

</html>

Answer 1

尝试

body,
html {
  height: 100%;
  background-color : red;
  margin: 0;
}

全尺寸背景中的边距

1 个答案: