固体渐变不是真的？在停止时不要有清晰的边缘 [英] Solid gradients not really solid? Don't have crisp edges at color stops
问题描述
在CSS中，这似乎是最简单的方法来创建纯色的渐变，其中颜色结束，突然停止在颜色。示例 -
In CSS, this seems to be the easiest way to create solid looking gradients where colors end and start abruptly at color stops. Example -
background-image：linear-gradient（底部，灰色100px，白色0） / *让浏览器决定* /
或
background-image：linear-gradient（to bottom，gray 100px，white 100px）; / *显式指定。* /
会发生什么是生成一个渐变，但它没有真正的边缘， 。我的假设是，代码将导致灰色停止在100px和白色开始紧接其后。
What happens is that a gradient is generated but it doesn't really have crisp edges where the colors meet. My assumption was that the code would result in gray stopping at 100px and white starting right after it.
但事实证明，它仍然有点模糊。我把下面的例子（查看它作为整页）。
But it turns out that it's still a bit blurry. I have put together an example below( view it as Full Page). At the center of the screen where the gray and white meet, you can see the difference.
- 为什么会发生这种情况？是因为计算浏览器需要做什么？
- 以任何方式获得色彩满足的绝对清晰边缘。
- 即使像素值不会做得很好。
Edit - Even pixel values don't do a great job.
* {
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;
}
<div class="container">
<div class="gradient"></div>
</div>
推荐答案
这似乎是一个常见的错误。它不仅出现在Chrome（最新的FF），虽然不同的浏览器/引擎有不同的症状和规模。
This seems to be a general bug. It appears not only in Chrome (latest FF has it), though different browsers/engines have different symptoms and scale.
例如，
请参阅我在jsfiddle上的测试用例： http://jsfiddle.net/matvey_andreyev/ufadpo1n/
Chrome使用非常高的元素表现得很奇怪。
See my test case on jsfiddle: http://jsfiddle.net/matvey_andreyev/ufadpo1n/ Chrome behaves quite strangely with a very high element.
代码本身：
<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>
目前似乎没有真正的答案。我最后使用背景图片，而不是线性梯度的结尾。
There seems to be no real answer to this at the moment. I ended up using a background image instead of the linear-gradient in the ends.
这篇关于固体渐变不是真的？在停止时不要有清晰的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
