HTML图像遍及整个屏幕

时间：2015-04-11 18:36:29

标签： html css html5 css3

所以我有这个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
    {

    }

此图像不会在整个屏幕上拉伸，在图像周围留下白色。我尝试在谷歌研究这个，但只发现如何不切断图像并显示完整的图像。我的问题不在于图像被切断，而是在整个屏幕上都不会延伸。

enter image description here

空间静止图像是div图像。橙色/蓝色图像是身体背景。我如何让div图像拉伸并覆盖身体图像。

2 个答案:

答案 0 :(得分：3)

TL; DR 此问题是由正文元素上的边距引起的

body元素

的默认属性是什么

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

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

这些属性使得更容易阅读文本而不进行任何格式化，因为文本不会触及浏览器窗口的两侧，与书籍相同

图像不粘贴到页脚的问题的默认属性是什么

由于＆＃34;保证金：8px;＆＃34;附着在身体上，身体内的所有元素在它们与浏览器窗口边缘之间的间隙为8px。 虽然这个差距是由html草案设计的，但它会成为问题，因为它会阻止把东西放在浏览器窗口的旁边。

如何解决这个问题

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

删除body元素上的边距

使用以下css代码

body { margin: 0; }

您可以从html中删除边距，允许您使用webapp触摸屏幕的两侧。然而，这有其缺点，即：

  • 您需要在设计中添加边距/填充，以防止它触及可降低可读性的侧面

＆＃13;
＆＃13; 
body { margin: 0px; }

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

#image {
  background-color: black;
  height: 100px;
}
＆＃13; 
<body>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <div id=image></div>
</body>
＆＃13;
＆＃13;
＆＃13;

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

通过对图像使用绝对/固定定位，可以将图像渲染的位置强制为正确的坐标。 这可以通过以下方式完成：

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

这有一个优点，即无论浏览器的大小，您都有一个始终位于页面底部的页脚。这也有其自身的缺点，包括：

  • 如果图像上方的文字很大，它会在创建滚动条之前在图片下方流动，这些可以通过添加＆＃34; margin-bottom：100px;＆＃34;到你的身体元素，这样文本将在页面底部留下一个更大的上限

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


#image {
  height: 100px;
  background-color: black;
}
＆＃13; 
<body>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <div id=image></div>
    </body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以尝试这样： - 

<div id="foot-er" style="background:url(001.png); height: 190px; width: 1349px; border: 1px solid black; line-height:1.7em;background-size:100% 190px"></div>

background-size:100% 190px

100％是宽度，190像素是图像高度，这将拉伸您的图像。

相关问题
最新问题