Question

（这是我initial question的更好的改写 - 你可以将另一个标记为此副本。谢谢）

我看到了很多类似的问题，但找不到修复方法。打开this sample并调整浏览器的大小，使其高度比主div高度（~400像素）短向下滚动时，附着在身体上的背景图像会被切断。

html {
  height: 100%;
  color: white;
}
body { 
  height:100%; 
  padding: 0; 
  margin: 0; 
  background:url(bg.jpg) repeat-x; 
  background-position: bottom;
  background-size: contain;
}
/*#pageWrap {	background:url(bg.jpg) repeat-x;}*/
#page {
  height:100%;
}
#divHeader { 
  width:100%; 
  height:115px; 
}
#divMain {
  width:600px;
  height:400px;
  border: solid 1px brown;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="pageWrap">
      <div id="page">
        <div id="divHeader">Header</div>
        <div id="divMain">Main</div>
        <div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
      </div>
    </div>
  </body>
</html>

我尝试将背景图像移动到pageWrap div，就像有人建议的那样。它解决了垂直滚动问题，但水平创建了一个类似的问题：当窗口太窄而向左滚动时，图像在右侧被切断。

任何真正的解决方案？

Answer 1

也许您可以从HTML，BODY和#page中删除高度：100％，然后将正文上的背景颜色设置为＃3E3E3E（在此示例中）。

不同之处在于背景图像不会一直向下拉伸，但它会消除滚动问题。

高度：100％仅适用于浏览器窗口高度的100％，而不是浏览器窗口中页面的高度 - 这就是您的原因;向下滚动时，请在下方获取白色区域。

Answer 2

我建议用CSS渐变替换背景图像，这可能看起来很难，但a fantastic tool可以为您完成所有操作（它们还会在工具下方显示浏览器支持表！）

您想要的渐变的输出CSS如下所示：

background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(204,204,204,1) 96%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

此外，您可能希望删除height: 100%的html和正文上的min-height: 100%，因为您希望此渐变在此页面的长度上延伸。

你想在图像上使用渐变的原因纯粹是因为它用无请求替换了对~100-300kb图像的请求，并且只添加了~100-300b我认为CSS几乎可以与任何标准进行良好的交易。

该工具还支持导入图像，您基本上可以拍摄图像，上传图像并获得渐变效果，与手工制作完美结果相近。

滚动视口

2 个答案: