2

我正在设计一个响应式布局，并使用以下 CSS 在背景顶部放置了一个 grungy png 叠加层：

#bg{
   background:url(images/top1.png) no-repeat; 
   position:absolute; 
   width:1423px; 
   height:350px; 
   top:0; 
   left:50%; 
   margin-left: -711px;
}

这样，无论页面宽度如何，图像始终居中。当浏览器窗口缩小到小于#bg覆盖的背景图像的宽度时，就会出现我的问题。出现一个水平滚动条，背景向右延伸很远（尤其是当浏览器非常小时）。

你可以在这里看到一个演示：http: //pixelcakecreative.com/cimlife/responsive2/

如您所见，出现水平滚动条，我希望浏览器窗口缩小而不保留图像的整个宽度！有任何想法吗？

4

2 回答 2

1

try this css code:

      #bg{
 background:url(images/top1.png) no-repeat center;
 position:absolute;
 width:100%;
 height:350px;
 top:0px;
 left:0px;
 }
于 2011-12-03T20:10:04.187 回答
0

刚刚快速浏览了您的代码。检查你的导航，这个会产生滚动条。

看看如何在您的浏览器中启用开发人员工具来检查您的页面。这是检查元素属性的好方法。

这是 Chrome 的一个很好的介绍：链接

对于 Safari：链接

于 2011-12-04T16:57:31.277 回答