css – -webkit-linear-gradient导致Chrome/Safari中的条带

标题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;
    }

它应该出来看起来像这样，不管窗口大小：

css – -webkit-linear-gradient导致Chrome/Safari中的条带

解决方法

相关文章