Question

在CSS中，这似乎是创建实体渐变渐变的最简单方法，其中颜色在颜色停止处突然停止。示例 -

background-image:linear-gradient(to bottom, gray 100px, white 0); /*Let the browser decide*/

或

background-image:linear-gradient(to bottom, gray 100px, white 100px); /*Explicitly specify.*/

会发生渐变，但它并没有真正具有颜色相遇的清晰边缘。我的假设是代码会导致灰色停止在100px并且白色在它之后开始。

但事实证明它仍然有点模糊。我在下面汇总了一个示例（将其视为整页）。在灰色和白色相遇的屏幕中央，您可以看到差异。

为什么会这样？是因为浏览器需要做的计算吗？
如何获得颜色相遇的绝对清晰边缘？

编辑 - 即使像素值也不是很好。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, #999 10em, white 0)
}
.container {
  width: 50%;
  height: 100%;
}
.gradient {
  background: #999;
  height: 10em;
}

＆＃13;

<div class="container">
  <div class="gradient"></div>
</div>

＆＃13;

Answer 1

正如@ Lister先生在评论中提到的，看起来像是Chrome的一个错误。找一台Mac机，看它是否与safari相同。这样我就可以为两者提出一个错误。

Answer 2

这似乎是一个普遍的错误。它不仅出现在Chrome中（最新的FF有它），尽管不同的浏览器/引擎有不同的症状和规模。

例如，如果在非常大的元素上放置“直边”线性渐变，模糊边缘将会增长。

在jsfiddle上查看我的测试用例：http://jsfiddle.net/matvey_andreyev/ufadpo1n/ Chrome的元素非常奇怪。

代码本身：

<div class="padding">
    <div id="gradient"></div>
    <div class="controls">
        <div class="part">
             <h3>Demo of a blurry edge where a straight one is expected</h3>
 <strong>linear-gradient</strong>( to bottom, transparent,
            <br />transparent
            <input class="tool" type="text" id="edge1" value="50px" />,
            <input type="text" class="tool" id="color2_1" value="#d00" />
            <input type="text" class="tool" id="edge2" value="50px" />,
            <input type="text" class="tool" id="color2_2" value="#d00" />
            <input type="text" class="tool" id="edgeLast" value="100%" />)
            <br/> <strong>height:</strong> 
            <input type="text" class="tool2" id="height" value="300px" />
        </div>
        <div class="part">
             <h4>Some preset examples</h4>

            <p><span class="preset" id="default">default values</span>
            </p>
            <p><span class="preset" id="bigLast">10000px position of the last color stop</span>
            </p>
            <p><span class="preset" id="edge1greater">1st color stop greater than second</span>
            </p>
            <p><span class="preset" id="skyscraper">Set great height to the #gradient</span>
            </p>
            <p>Don't forget viewing in different browsers.</p>
        </div>
    </div>
</div>

<style type="text/css">
html, body {
    min-height:100%;
    margin:0;
    padding:0;
}
.padding {
    padding:20px;
    background-color:#ddd;
    position:relative;
    height:calc(100%);
}
#gradient {
    height:300px;
    background-position:0 0;
    background-image: linear-gradient(to bottom, transparent, transparent 50px, #d00 50px, #d00 100%);
    border-style:dotted;
    border-width:1px;
    border-color:#fff;
}
.controls {
    background-color:#fff;
    padding:30px 30px 15px;
    font-size:13px;
    color:#444;
    box-shadow:1px 1px 3px rgba(0, 0, 0, 25);
    max-width:500px;
    position:absolute;
    top:30px;
    right:30px;
}
h3 {
    margin:0 0 .5em;
}
h4 {
    margin:0;
}
.tool, .tool2 {
    width:40px;
}
.preset {
    cursor:pointer;
    color:#00d;
    border-style:dashed;
    border-width:0 0 1px;
}
.preset:hover {
    color:#d00;
}
.part {
    margin:0 0 15px;
}
</style>

<script type="text/javascript">
$(document).ready(function () {
    var $edge1 = $('#edge1'),
        $edge2 = $('#edge2'),
        $color2_1 = $('#color2_1'),
        $color2_2 = $('#color2_2'),
        $edgeLast = $('#edgeLast'),
        $gradient = $('#gradient'),
        $height = $('#height'),
        defaultGrad = $gradient.css('background-image'),
        defaultHeight = $gradient.css('height'),
        setDefaultValues,
        changeGrad,
        changeHeight;

    setDefaultValues = function setDefaultValues() {
        $gradient.css({
            'background-image': defaultGrad,
                'height': defaultHeight
        });
        $edge1.val('50px');
        $edge2.val('50px');
        $edgeLast.val('100%');
        $color2_1.val('#d00');
        $color2_2.val('#d00');
        $height.val(defaultHeight);
    }

    changeGrad = function changeGrad() {
        $gradient.css({
            'background-image': 'linear-gradient(to bottom, transparent, transparent ' + $edge1.val() + ', ' + $color2_1.val() + ' ' + $edge2.val() + ', ' + $color2_2.val() + ' ' + $edgeLast.val() + ')'
        });
    }

    changeHeight = function changeHeight() {
        $gradient.css({
            'height': $height.val()
        });
    }

    $('.tool').on('focus blur keyup change', changeGrad);
    $('.tool2').on('focus blur keyup change', changeHeight);

    $('#default').click(function () {
        setDefaultValues();
        changeGrad();
    });

    $('#bigLast').click(function () {
        setDefaultValues();
        $edgeLast.val('10000px');
        changeGrad();
    });

    $('#edge1greater').click(function () {
        setDefaultValues();
        $edge1.val('55px');
        changeGrad();
    });

    $('#skyscraper').click(function () {
        $height.val(50000 + 'px');
        changeHeight();
    });

});
</script>

目前似乎没有真正的答案。我最终使用背景图像而不是末端的线性渐变。

坚实的渐变不是很坚固？在颜色停止时不要有清晰的边缘

2 个答案: