标题prettymuch说这一切。下面的第一张图片是一个屏幕截图，当整个页面是大约8000像素高，采取在最新版本的Chrome：
而这张图片是一个不同的页面(使用相同的CSS)，大约800像素高：
这里是代码：
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),-webkit-linear-gradient(
top,rgba(99,173,241,1) 0px,rgba(0,255,0) 250px
);
background-image: url('/media/flourish.png'),-moz-linear-gradient(
top,0) 250px
);
background-image: url('/media/flourish.png'),-o-linear-gradient(
top,0) 250px
);
background-position: center top,center top;
background-repeat: no-repeat,repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#63ADF1',endColorstr='#00000000')";
}
渐变意味着从页面顶部切掉250px。条带的程度似乎取决于页面的总高度的事实是非常奇怪的：在这两者之间的页面(800px和8000px)似乎具有小于第一示例但仍然显而易见的频带。
有趣的是，我以前使用-webkit-gradient(‘linear’…)而不是有同样的问题;我只交换到-webkit线性梯度，所以它会与我的-moz和-o梯度一致。
我没有在Safari上试过，但上面的代码使它在Firefox和工作在Opera(在颜色搞乱，但梯度仍然光滑)工作完美。 Nevermind IE，我放弃了。
有没有人看过这个？
更新：这种情况发生在我的Mac的Chrome / Safari，但乐队是大约1/3的顶部图片中显示的乐队的大小，对于完全相同的页面。在OSX Chrome和OSX Safari中的条带是相同的。
1/3的尺寸仍然明显，但不是那么震撼。实际页面是在http://www.techcreation.sg/page/web/Intro%20to%20XTags/，如果你想看到自己在一些其他浏览器。 CSS是使用less.js在浏览器中编译的“inline”css。
解决方法
看起来像一个webkit错误。我想出了下面的解决方案，测试了最新的Chrome和FF。总之，您将定位一个div，其中包含您的主要内容背后的背景。我还添加了几种样式，使IE更快乐。
给定此HTML：
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
结合此样式表：
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,0) 250px
);
background-image:
-moz-linear-gradient(top,0) 250px
);
background-image:
-o-linear-gradient(top,0) 250px
);
background-image:
-ms-linear-gradient(top,1) 0%,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1',endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,0) 250px
); /* W3C */
background-position: center top,center top;
background-repeat: no-repeat,repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial,sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial,sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
它应该出来看起来像这样，不管窗口大小：
