-webkit-gradient 在 Chrome 中没有模糊

Question

在 Chrome 中，当您从一种颜色更改为另一种颜色时，会产生模糊效果。我需要这个没有模糊的剪辑。

在 Firefox 中：

在 Chrome 中：

完整代码：

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

昨天我偶然发现了一个类似的问题，并决定发布我的解决方案。 我正在使用 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 {
    $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');
}

Answer 2

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

对于方向（第一个参数）使用角度而不是描述性方向，对于 Chrome，只需稍微更改角度，例如 0.01 度。它不会很明显，但会呈现清晰。

您可以将其放入浏览器特定属性中，因此其他浏览器不会受到影响（因为它会以相反的方式工作 - 稍微倾斜的方向会使您的渐变稍微模糊）。 请记住，-webkit-linear-gradient 有不同的角度默认值：垂直“到底部”渐变在其他浏览器中等于 180 度角值，而在 webkit 中是 -90 度。

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

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

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

Answer 3

为不同的浏览器使用浏览器前缀，对于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%);