背景图像在低分辨率下偏离页面（导致水平滚动条）答案

【问题标题】：Background image is off-setting the page at low resolutions (causing horiz. scrollbar)背景图像在低分辨率下偏离页面（导致水平滚动条）
【发布时间】：2015-03-14 23:40:58
【问题描述】：

我的网站显示了一个大的背景图像层，上面覆盖着一个半透明的绿色层。问题出现在较低的分辨率下，即绿色图层的宽度似乎比背景图像更薄，从而暴露了浏览器窗口右侧的一些背景图像。

Here is a link to my demo site

我还不能插入图片，但是here is a link 可以插入显示我正在谈论的内容的屏幕截图。

绿色层的css：

#mainarea {

height: 960px;
width:100%;
  background:rgba(46, 204, 113, 0.7);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

背景图片的css：

.bg{

    background:url(https://ununsplash.imgix.net/photo-1415871989540-61fe9268d3c8?q=75&fm=jpg&s=d4ccd3c8661437d6e3ea5e88c63c647f) no-repeat top left;
background-size:cover;
    width:100%;
    height:900px;
    position:fixed;
    z-index:-1;
}

感谢您的宝贵时间。

【问题讨论】：

标签： html css responsive-design overlay layer

【解决方案1】：

问题是你有一个元素（在具有类 mainarea 的 div 中的 h2）超出了主区域的宽度，因为它的文本包含一个无法换行的非常长的单词。所以有几种解决方案：

您可以将 h2 设置为“溢出：隐藏”
您可以将 mainarea div 设置为“溢出：隐藏”
您可以将 h2 标题更改为可以正确换行的真实文本

【讨论】：

我认为解决方案是使用 loremipsum.com 并输入更好的 FPO 文本。
感谢您的输入，但问题仍然存在...我减少了 h2 中文本的长度，并添加了溢出：隐藏；到 h2 （正如您在 Inspect Element 中看到的那样），但它仍然不起作用。你可以在这里看到更新的截图：taskbasket.net/public/screeny2.png，我的网站又是：taskbasket.net/public/demo11.html。非常感谢
好的，现在我看到窗口宽度较小时，问题仍然出现在我的浏览器中。现在是因为橙色按钮和页脚中的电子邮件输入文本。问题似乎是您给它们的宽度为 100%，并且它们在层次结构中的某处也有填充或边距，这使它们超过了父级的大小。我建议您首先在“html”元素中添加“overflow-x: hidden”，这样就不会突出并尝试修复不适合的元素的宽度。
谢谢纳乔。我似乎已经通过向绿色覆盖层以及每个向右突出的部分添加最小宽度规范来修补它。他们现在都排队（在我的真实网站上）。不过，也许这不是理想的解决方案……感谢您的宝贵时间。