在响应式布局中绝对定位背景答案

【问题标题】：Absolutely positioning background in responsive layout在响应式布局中绝对定位背景
【发布时间】：2011-12-03 19:52:35
【问题描述】：

我正在设计一个响应式布局，并使用以下 CSS 在背景顶部放置了一个 gruny 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/

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

【问题讨论】：

我加了max-width: 100%，滚动条变小了，但没有完全消除。（如果用JavaScript响应，为什么不能用JS适配背景呢？）
别忘了在你的文本框中添加 type="text"。

标签： css css-position responsive-design

【解决方案1】：

试试这个css代码：

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

【讨论】：

这确实修复了它，但是当浏览器足够小时，会出现另一个水平滚动条。知道为什么吗？不是因为绝对定位的bg，而是别的原因。

【解决方案2】：

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

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

这里有一个很好的 Chrome 介绍：Link

对于 Safari：Link

【讨论】：