真正的解决方案 - CSS背景图片

Question

我基本上想制作一个完整的视口背景图像。

这是我的代码：

<html>
    <body>
        <div class="container">
        <img src="loginBg.png" height="100%" width="100%">  
    </div>
</html>

样式表就像：

.container{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

这种方法的问题是，图像是全屏的，但下面有一些空间，因为这个空间页面是可滚动的。我在firefox ubuntu中检查过，白色空间不存在。

提前致谢

Answer 1

在身体上使用CSS背景图片以及no-repeat和background-size。

2个例子

body {
    background: url(http://www.placehold.it/200) no-repeat;
    background-size: cover;
}

注意： html,body { height: 100% }允许百分比背景大小。

html,body {
  height: 100%;
}

body {
  background: #F00 url(http://www.placehold.it/200) no-repeat;
  background-size: 100% 100%;
}

了解更多：

Answer 2

使用display:block来修复图片问题

.container{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}
img{
    display:block;
}

Answer 3

你可以在身体标签上使用背景图片，这很有意义。

您注意到的问题是由于图像是内联元素，这会增加图像下方的一些空间并触发溢出情况。

您可以添加以下内容进行修复：

.container img {
    display: block;
}

您还可以使用vertical-align: top删除额外的空白区域或应用overflow: hidden 隐藏溢出，所有可行的选项。