滚动右侧的背景图像或颜色中断

Question

这是当浏览器最小化并且窗口尚未向右滚动时的屏幕截图。

灰色标题栏看起来很整洁，但是当我向右滚动时会看。

当我向右滚动时结束。这已成为移动设备上的夜魇。

这是#header

的css

#header {
    background-color: rgb(227,227,227);
    background-color: rgba(227,227,227,1);
    border-bottom: 1px solid #e6e6e6;
    padding: 27px 0;
}

我尝试了很多改变，比如repeat-x和用图像替换颜色，但没有任何效果。我能得到答案吗？

Answer 1

试试这个。

#header{
    background: #E3E3E3;
    border-bottom: 1px solid #E6E6E6;
    padding: 27px 0;
    width:100%;
}

Answer 2

尝试这种全屏CSS技术：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

Swaroop，

你有可能粘贴完整的HTML代码吗？看起来父元素（包含元素）中的某些东西正在改变背景的属性。

如果#header没有被任何东西包含，它将默认为其内部的任何宽度（可能不是100％）。因此添加100％属性，它将在宽度上拉伸全屏。如果它仍然没有在整个屏幕上延伸，那么这意味着围绕该元素的某些东西会阻止它扩展。

感谢Swaroop，

亚伦