-webkit-linear-gradient在Chrome / Safari中导致条带化

时间：2011-08-29 17:35:25

标签： css google-chrome css3

标题很漂亮。下面的第一张图是整个页面大约8000像素高的屏幕截图，采用最新版Chrome：

enter image description here

虽然这张照片是针对不同的页面（使用相同的CSS），大约800像素高：

enter image description here

这是代码：

  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, 255, 0) 250px
        );

     background-image: url('/media/flourish.png'), 
        -moz-linear-gradient(
           top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );


     background-image: url('/media/flourish.png'), 
        -o-linear-gradient(
           top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 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-linear-gradient，因此它会与我的-moz和-o渐变一致。

我没有在Safari上尝试过，但是上面的代码使它在Firefox中工作得非常好，在Opera中工作很好（颜色搞砸了，但渐变仍然很平滑）。没关系IE，我放弃了。

之前有其他人见过吗？

更新：这也发生在我的Mac Chrome / Safari上，但是相同的页面，这些乐队大约是顶部图片中显示的乐队大小的1/3。 OSX Chrome和OSX Safari中的条带相同。

1/3的尺寸仍然很明显，但不是那么刺耳。实际页面位于http://www.techcreation.sg/page/web/Intro%20to%20XTags/，如果您想在其他浏览器中查看。 CSS是使用less.js在浏览器中编译的“内联”css。

7 个答案:

答案 0 :(得分：15)

看起来像一个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,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -moz-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -o-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -ms-linear-gradient(top,
                rgba(99,173,241,1) 0%,
                rgba(0,255,255,0) 250px
            ); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
        background-image:
            linear-gradient(top,
                rgba(99,173,241,1) 0%,
                rgba(0,255,255,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;
    }

无论窗口大小如何，它应该看起来像这样：

Chrome image

答案 1 :(得分：4)

您的演示链接不起作用，但我做了一些测试，当您向body / html元素添加100％的宽度/高度时，使用Chrome时效果很好，如下所示：

body, html {
    width:100%;
    height:100%;
}

Demo

你可以尝试一下，或者你可以只声明一个标题/徽标片段，你可以在其中添加起始渐变，只需将结束渐变添加到你的css主体中，这样就可以正确混合，如下所示：

<强> CSS 

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    background-color: #f3ffff;
    margin:0px;
    height:10000px;
}

.header {
    height:300px;
    width:100%;
    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    -webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
    );

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
    background-position: center top, center top;
    background-repeat: no-repeat, repeat-x;
    background-size:auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}

<强> HTML 

<div class="header">
    content
</div>

Demo

友情提示：对于任何寻找此问题的人，您都可以在Chrome中看到它：http://jsfiddle.net/skJGG/

答案 2 :(得分：1)

使用rgba（）值时Chrome似乎有一些错误。我尝试使用正常的十六进制值，它似乎解决了我的问题。

看看here是否也适合你。

修改

看起来问题出在250px限制中，因为它只在设置时出现。

我没有设法提出比this one更好的解决方案。

用您喜欢的渐变重叠div，250px高。然后你可以让页面尽可能高，因为div总是250px高。

答案 3 :(得分：0)

Webkit以相同的方式呈现-webkit-gradient('linear'...)和webkit-linear-gradient。问题在于您的多重背景。我遇到了同样的问题，我最终将两个不同的元素叠加在一起，然后为每个元素提供背景。类似的东西：

<body>
 <div class="body-overlay"<div>
</body>

CSS 

body{-webkit-linear-gradient(...)}
    .body-overlay{background:url('blah.png')}

我认为这是因为图像具有固定数量的像素

答案 4 :(得分：0)

而不是使用背景图片，尝试使用此（背景） - 

 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */

并且始终使用十六进制值。但是从UX的角度来看，最好在图像中使用（因为无论如何都要加载图像），你不必担心跨浏览器的兼容性。

答案 5 :(得分：0)

您是否尝试为第一张图片设置background-size: auto, 250px 250px; - auto，为渐变设置250像素。

当你不需要如此大的渐变图像覆盖整个页面时，最好限制它的大小。除了渲染大图像的问题，我认为它对浏览器的性能更好。

所以，你的例子看起来像http://jsfiddle.net/kizu/phPSb/（盲目，但无法重现问题）。

答案 6 :(得分：0)

在任何奇怪的情况下尝试使用：

True
相关问题
最新问题