中低屏幕上的背景图像使img水平底部的空白区域答案

【问题标题】：Background image on medium and lower screen makign white space horizontally bottom of img中低屏幕上的背景图像使img水平底部的空白区域
【发布时间】：2014-12-16 15:47:45
【问题描述】：

我遇到了中等屏幕和更低屏幕的背景图片问题... 我尝试了背景封面属性，但它在图像底部添加了水平空白我该如何解决...？ html在这里 html

 <body class="bg">
        <div class="container">
            <div class="box"></div>
        </div>
    <body>

CSS

    .bg{
    background-image:url(http://themes.siiimple.com/360/wp-content/uploads/2012/07/FreeGreatPicture.com-18429-hd-color-background-wallpaper.jpg);
    background-repeat:no-repeat;
    background-size: cover ;
    }
.box{
    height:400px;
    width:88%;
    background:#C5C0C1;
    opacity:.5;
    margin-top:50px;
    }

http://jsfiddle.net/azhrhussain/1xtvvfL8/

【问题讨论】：

尝试设置html和body的高度，body, html { height:100%;}是不是这个意思jsfiddle.net/1xtvvfL8/1？
查看@media 909x875 和下面的影响

标签： html css frontend

【解决方案1】：

您正确使用了 background-size 属性，但您的 body 元素没有到达窗口底部。只需将其添加到您的 html 中：

html {
  height: 100%;
  min-height: 100%;
}

http://jsfiddle.net/1xtvvfL8/4/

【讨论】：

盒子工作正常...但背景没有水平覆盖到盒子...？
我想我得到了你需要的东西。看看我更新的解决方案。
很高兴能帮上忙！不要忘记让这个答案被接受：i.stack.imgur.com/uqJeW.png
请注意，虽然 background-size:cover 在 CSS3 兼容浏览器中运行良好，但众所周知它的性能很差。如果您打算在整个网站上使用大背景图片，出于速度和兼容性的原因考虑一些 JavaScript / jQuery 解决方案是很好的选择。

【解决方案2】：

为避免出现空格，请添加：

html,body {
  margin:0;
  padding:0;
}

它会删除浏览器自动应用的页边距或内边距。

【讨论】：

也不工作...我试过但问题仍然存在...@media bellow 909x875