Question

在this page上，我有双色背景。页面的结构是：

<body>
  <div id="upbg"/>
  <div id="container"/>
</body

通过向upbg添加深色背景图像和在身体上添加较亮背景图像来实现此背景。 upbg的css是：

#upbg {
  background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0;
  height: 275px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

如果您使浏览器窗口非常窄以显示滚动条，那么如果您向右滚动，您会注意到upbg的背景图像不会填满页面的整个宽度。

我的猜测是因为'width：100％'表示浏览器窗口的宽度，而不是页面的整个宽度，有没有办法解决这个问题？

谢谢，唐

Answer 1

我猜这是因为 'width：100％'表示宽度浏览器窗口，而不是整个页面的宽度，有没有办法解决这个问题？

100％表示它将与它相对于它的父元素一样宽（在这种情况下，body，其宽度将基于其父元素的宽度{{1} }）。除非另有说明，否则它将与浏览器窗口一样宽。

问题是，您有另一个html的孩子，其宽度可能比body宽：body和#container的样式都是这样的，因此它们始终至少#footer宽。这并没有扩大它们的父元素，因为我们已经确定它们将与浏览器窗口一样宽;相反，他们溢出他们的父母。对此的默认响应是显示滚动条，以便您可以滚动并查看溢出的内容;如果您将样式1026px添加到overflow:hidden或html，则会发现您的内容和页脚剪裁为浏览器窗口的大小，并且不会显示滚动条。

有几个简单的解决方案：

在#upbg中包装＃content和#footer，而不是在它前面。然后删除现有的样式，并按如下方式设置样式：body这样就完成了两件事：你不再为#upbg指定宽度，从而允许它变得足够宽以包围它的新子节点，并允许它你要摆脱很多现在不需要的样式（你要清除你为position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0;设置的填充，以及body上的一些样式。可替换地，
摆脱#content和#content的最小宽度，以免它们溢出。

Answer 2

只需使用宽度和宽度均为绝对定位的图像即可。如果你可以使用整个背景，身高设置为100％包裹身体标签。设置其他元素的z-index高于背景图像。


 <head>
  ...
  <style>
    .virtualBg{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  </style>
 </head>
 <body>
   <img src="path/to/bg.jpg" class="virtualBg" />
   ...
 </body>

但我建议使用包含两种色调的垂直裁剪图像，然后对身体元素重复x背景。

背景图片不会拉伸整页宽度

2 个答案: