Question

在Chrome中，当您从一种颜色更改为另一种颜色时，会变得模糊。而且我需要这种切割而不会模糊。

在Firefox中：

enter image description here

在Chrome中：

enter image description here

完整代码：

background: rgb(216, 216, 216);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(216, 216, 216, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(216, 216, 216, 1)), color-stop(93%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0);

Answer 1

针对不同的浏览器使用浏览器前缀，对于mozilla，请仔细阅读。

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 5%,rgba(216,216,216,1) 33%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 70%,rgba(216,216,216,1) 70%,rgba(255,255,255,1) 93%);

Answer 2

我遇到了同样的问题，这是我刚刚找到的解决方法，至少对我有用（Chrome 48.0）：

对于方向（第一个参数），使用角度而不是描述方向，对于Chrome，稍微改变角度，例如0.01deg。它不会引人注意，但它会变得清晰。

您可以将其置于特定于浏览器的属性中，因此其他浏览器不会受到影响（因为它会以相反的方式为它们工作 - 稍微倾斜的方向会让您略微模糊渐变）。请记住，-webkit-linear-gradient有不同的角度默认值：vertical＆＃39; to bottom＆＃39;渐变在其他浏览器中等于180deg角度值，而在webkit中它是-90deg。

因此，对于垂直渐变，请添加：

-webkit-linear-gradient(-89.99deg, colorstops....)

...并在线性渐变之后添加它，以覆盖它，因为Chrome读取两个声明（标准和供应商前缀）

Answer 3

昨天，我偶然发现了一个类似的问题，并决定发布我的解决方案。我正在使用SCSS，但我真的不认为这很重要。这个想法是使用两张地图：一张带有颜色，一张带有停靠点。然后遍历地图并生成多个背景。

TL; DR，您可以在线观看演示here

我正在为此使用mixin，因为我想重用事物：

/**
 * Create a single background image using CSS gradients
 * without blur between color stops.
 * This can be achieved with a single linear-gradient,
 * but in only Firefox will render it properly.
 * All other browsers will blur the edges of the stops.
 *
 * @param $colors - Map of colors
 * @param $stops - Map of color stops
 * @param $direction - One of 'horizontal' or 'vertical'

 * @return - Multiple background declaration consisting of
 * many linear gradients
 *
 * It's important that the keys of both maps are the same.
 */
@mixin rainbow($colors, $stops, $direction: 'horizontal') {
    $dir: to right;
    $background: '';

    @if $direction == 'vertical' {
        $dir: to bottom;
    }

    @each $name, $color in $colors {
        $list: map-keys($colors);
        $slash: unquote('/');
        $index: index($list, $name);
        $comma: unquote(', ');

        @if $index == length($list) {
            $comma: unquote('');
        }

        $offset: map-get($stops, $name);
        $gradient: linear-gradient($dir, $color 0%, $color 100%);
        $size: $offset 100%;

        @if $direction == 'vertical' {
            $size: 100% $offset;
        }

        // prettier-ignore
        $background: $background + $gradient no-repeat 0% 0% $slash $size + $comma;
    }

    $background: unquote($background);
    background: $background;
}

然后我要创建两个地图-一个带有颜色，另一个带有色标。重要的是要提到地图的键应该相同：

// DEMO
body {
    background: black;
}

div {
    $blue: blue;
    $green: green;
    $orange: orange;
    $purple: purple;
    $red: red;

    $colors: (
        'blue': $blue,
        'green': $green,
        'orange': $orange,
        'purple': $purple,
        'red': $red
    );

    $stops: (
        'blue': 30%,
        'green': 45%,
        'orange': 62%,
        'purple': 87%,
        'red': 100%
    );

    height: 20px;

    @include rainbow($colors, $stops);
}

现在让我们看看它如何在您的用例中工作。我正在使用虚拟span元素：

span {
    $white: #fff;
    $gray: #d8d8d8;

    $colors: (
        '1': $white,
        '2': $gray,
        '3': $white,
        '5': $gray
    );

    $stops: (
        '1': 5%,
        '2': 33%,
        '3': 70%,
        '5': 100%
    );

    height: 200px;
    display: block;

    @include rainbow($colors, $stops, 'vertical');
}

-webkit-gradient在Chrome中没有模糊

3 个答案: