Question

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

我无法插入图片，但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;

}

背景图片＆＃c; 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;
}

感谢您的时间。

Answer 1

问题是你有一个元素（div中带有类mainarea的h2）超出了主区域的宽度，因为它的文本由一个无法包装的很长的单词组成。所以有几种解决方案：

您可以将h2设置为“overflow：hidden”
您可以将mainarea div设置为“overflow：hidden”
您可以将h2标题更改为正确包装的真实文本

背景图像以低分辨率偏移页面（导致水平滚动条）

1 个答案: