HTML 图像跨越整个屏幕

所以我有这个 div 元素

    <footer><div id="foot-er" style="background-image: url(images/Home/space.gif); height: 190px; width: 1349px; border: 1px solid black; line-height:1.7em;"></div></footer>

    // CSS
    #foot-er
    {

    }

该图像不会拉伸(stretch)到整个屏幕，图像周围会留下白色。我尝试在谷歌中对此进行研究，但只找到了如何不剪切图像并显示完整图像。我的问题不是图像被切断，而是它不会延伸到整个屏幕。

enter image description here

太空星空图像是div图像。橙色/蓝色图像是主体背景。我如何让 div 图像拉伸(stretch)并覆盖 body 图像。

最佳答案

TL;DR 这个问题是由 body 元素上的边距引起的

body 元素的默认属性是什么

根据w3c default ，body元素包含以下css

body {
  display: block;
  margin: 8px; }
body:focus {
  outline: none; }

这些属性使您可以更轻松地阅读没有任何格式的文本，因为文本不会接触浏览器窗口的两侧，就像书籍一样

默认属性与图像不粘在页脚的问题有什么关系

因为“边距:8px;”附加到 body 后，body 内的所有元素与浏览器窗口边缘之间将有 8px 的间隙。虽然这个间隙是由 html 草案设计造成的，但它会成为问题，因为它会阻止将东西放在浏览器窗口的一侧。

如何解决这个问题

可以通过以下解决方案之一解决此问题:

删除 body 元素上的边距

通过使用以下 CSS 代码

body { margin: 0; }

您可以删除 html 中的边距，从而允许 web 应用程序触摸屏幕的两侧。然而，这有其缺点，即:

您需要在设计中添加边距/填充，以防止其接触侧面，从而降低可读性

body { margin: 0px; }

p {
  margin-top: 8px;
  margin-left: 8px;
}

#image {
  background-color: black;
  height: 100px;
}

<body>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <div id=image></div>
</body>

在图像上使用绝对/固定定位

通过在图像上使用绝对/固定定位，您可以强制将图像渲染到正确的坐标。这可以通过执行以下操作来完成:

#image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

这样做的优点是，无论您的浏览器有多大，页脚始终位于页面底部。这也有其自身的缺点，其中包括:

如果图像上方的文本太大，它会在创建滚动条之前流到图片下方，可以通过添加“margin-bottom: 100px;”来解决这些问题到你的 body 元素，这样文本就会在页面底部留下更大的上限

#image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}


#image {
  height: 100px;
  background-color: black;
}

<body>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <div id=image></div>
    </body>

关于HTML 图像跨越整个屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29581600/