标题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; }
它应该出来看起来像这样,不管窗口大小: