所以我有这个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
{
}
此图像不会在整个屏幕上拉伸,在图像周围留下白色。我尝试在谷歌研究这个,但只发现如何不切断图像并显示完整的图像。我的问题不在于图像被切断,而是在整个屏幕上都不会延伸。
空间静止图像是div图像。橙色/蓝色图像是身体背景。我如何让div图像拉伸并覆盖身体图像。
答案 0 :(得分:3)
TL; DR 此问题是由正文元素上的边距引起的
根据w3c default,body元素包含以下css
body {
display: block;
margin: 8px; }
body:focus {
outline: none; }
这些属性使得更容易阅读文本而不进行任何格式化,因为文本不会触及浏览器窗口的两侧,与书籍相同
由于&#34;保证金:8px;&#34;附着在身体上,身体内的所有元素在它们与浏览器窗口边缘之间的间隙为8px。 虽然这个差距是由html草案设计的,但它会成为问题,因为它会阻止把东西放在浏览器窗口的旁边。
此问题可通过以下解决方案之一解决:
使用以下css代码
body { margin: 0; }
您可以从html中删除边距,允许您使用webapp触摸屏幕的两侧。然而,这有其缺点,即:
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;
通过对图像使用绝对/固定定位,可以将图像渲染的位置强制为正确的坐标。 这可以通过以下方式完成:
#image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
这有一个优点,即无论浏览器的大小,您都有一个始终位于页面底部的页脚。这也有其自身的缺点,包括:
#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;
答案 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像素是图像高度,这将拉伸您的图像。