html - 全尺寸背景中的边距

标签 html css

<分区>

我想在 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>

最佳答案

尝试

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

关于html - 全尺寸背景中的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58889899/

上一篇:html - 将页脚放在最小高度页面的末尾

下一篇:html - 无法使图像居中 div

相关文章:

javascript - 数据表不起作用(jQuery)

html - 如何仅在左侧和右侧获得框阴影

html - 与 Wordpress 中的自定义 CSS 和重力形式对齐

html - CSS Grid - 从 flexbox 布局转换

css - 如何转换供应商特定的 CSS

javascript - CSS HTML - DIV高度填充剩余空间

html - 带有背景图片的粘性页脚

javascript - 使用 JQuery/CSS 动画增加 div 的大小

jquery - 使用JQuery通过div轮播

javascript - 如何将内容传递到客户端 html 页面中的元素?