CSS渐变带问题？

我一直在试图做一个很酷的CSS渐变，但我遇到了一个不可接受的问题。 CSS渐变是带状的，看起来不太好。我也不想使用任何图像。这里是我的代码：CSS渐变带问题？

background-image: -moz-linear-gradient(top, #333, #000); 
background-image: -ms-linear-gradient(top, #333, #000); 
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000)); 
background-image: -webkit-linear-gradient(top, #333, #000); 
background-image: -o-linear-gradient(top, #333, #000); 
background-image: linear-gradient(top, #333, #000); 
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333', endColorstr='#000', GradientType=0);

我该如何解决这个问题？

enter image description here

来源

2012-08-30 Hunter Mitchell

-3

使用更复杂的梯度参数，即RGBA颜色，具有alpha通道。你可以随时随地阅读CSS3信息，我也会为你提供这个链接，它可以帮助你自动化你的过程，并教你rgba渐变的语法。

http://www.colorzilla.com/gradient-editor/

作为其它评论者指出的那样，这也可以，如果起点和终点间的色差是太微小到在中间正确显示步骤发生。

来源

2012-08-30 20:40:22 colonelclick

+12

只是一个简短的笔记，因为我偶然发现了这一点：无论你使用RGBA，HEX， HSLA或任何其他颜色模式，条带仍会发生，因为它与颜色模式无关。如果开始和结束颜色之间的差异太小而无法正确显示中间步骤，则会出现条带。 – Sven

任何人都在意清楚“更复杂的渐变参数，即rgba颜色，alpha通道”是否意味着什么？既然这似乎没有做任何事情？我注意到我在FF中获得比webkit更好的渐变效果：http://jsfiddle.net/G9mg2/2/ –

您应该可以通过添加具有相似颜色的其他渐变（或两个渐变）来缓解该问题，但使用alpha通道。使用与主梯度不同的步进将导致混合更加微妙。对于线性渐变，您可以通过使用α渐变的角度偏移来最大化该混合。 –

对于它的价值，我不能见你，我的显示器上描述的条纹的问题，但我相信，我知道你做了什么。

通常，浏览器在创建渐变时不使用抖动。这意味着颜色之间的步骤可以更明显。解决这个问题的唯一方法就是在Photoshop等渐变软件中制作渐变，然后将背景色设置为图像。对于这样高质量的图像，尺寸会非常大，可能不值得。另外，尺寸变得固定，并且不像CSS那样动态。

参见：http://bjango.com/articles/gradients/

来源

2012-08-30 20:36:22 Brad

嘿，看看这个问题...我发现它...我如何做到这一点，但在十六进制颜色代码，而不是RGBA？ http://stackoverflow.com/questions/7233649/webkit-linear-gradient-causes-banding-in-chrome-safari –

CSS渐变带问题？

回答

相关问题