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

发布时间：2020-12-14 22:32:17 所属栏目：资源来源：网络整理

导读：在 this page,我有一个双色背景.页面的结构是： body div id="upbg"/ div id="container"//body 通过向upbg添加深色背景图像并在身体上添加较亮的背景图像来实现此背景. upbg的css是： #upbg { background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll

在 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％’表示浏览器窗口的宽度,而不是页面的整个宽度,有没有办法解决这个问题？

谢谢,
唐

解决方法

My guess is that this is because
‘width: 100%’ means the width of the
browser window,rather than the entire
width of the page,is there a way to
fix this?

100％意味着它将与它相对于它定位的父元素一样宽(在这种情况下,主体,其宽度将基于其父元素的宽度,html).除非另有说明,否则它将与浏览器窗口一样宽.

问题是,你有另一个身体比身体更宽的孩子：#container和#footer的样式都是这样,它们总是至少1026px宽.这并没有扩大它们的父元素,因为我们已经确定它们将与浏览器窗口一样宽;相反,他们溢出了他们的父母.对此的默认响应是显示滚动条,以便您可以滚动并查看溢出的内容;如果你添加了样式溢出：隐藏到html或body,你会发现你的内容和页脚被剪裁到浏览器窗口的大小,并且没有显示滚动条.

有几个简单的解决方案：

>在#upbg中包装#content和#footer,而不是在它们之前.然后删除现有样式,并按如下方式设置样式：position：absolute;填充顶：25像素; background：url(images / bg-dark.jpg)repeat-x scroll 0 0;这完成了两件事：你不再为#upbg指定一个宽度,从而允许它变得足够宽以包围它的新孩子,并且它允许你摆脱许多现在不必要的样式(你需要清除你为身体设置的填充,以及#content上的一些样式.交替,>摆脱#content和#footer的最小宽度,这样它们就不会溢出.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!