Chrome 径向渐变 CSS 的平滑度

Question

我正在使用 chrome 18.0.1025.162，尝试创建一个径向渐变。

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9))

问题在于梯度很像素化，颜色和透明度的过渡是分块的而不是平滑的。这在Safari和Firefox中是不同的。Safari和Firefox做得非常顺畅和好。

这是chrome的一个bug吗？有人遇到过同样的问题吗？这是如此简单的渐变！这么简单的东西不能出现故障吧。

查看: http://jsfiddle.net/GyRLe/1/ 以了解我所说的示例。

这个问题有解决方案吗？图像会很糟糕:(

(好的，为了看到平滑度有多差): 这就是我使用它时得到的结果: http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari)（似乎有点锐利，但那是因为png，否则它接近完美的平滑度）

Firefox和Safari一样好，只是chrome做得不好。 我需要透明度，因为我要在背景中放置一个重复样式图像。

编辑：Chrome 20（金丝雀版）也出现了这个可怕的问题！

编辑2：我们使用CSS的原因是为了不必使用图像！因此，我已将此添加到http://code.google.com/p/chromium/issues/detail?id=123491，希望Google能够做好他们的工作，因为我认为Chrome非常棒。

- Tarang

---

不行！没有解决方案。你必须使用一张图片。 - Ry-

对我来说，它看起来非常流畅：http://i.stack.imgur.com/sal39.png（Chrome 18.0.1025.142 (Ubuntu 11.10)）。 - Rob W

与Safari相比较（我的例子不是很好，但是在我的某个配置下（背景图像），它看起来很糟糕）。 - Tarang

顺便说一下，这不太流畅（与此相比）http://i.imgur.com/3SYXW.png - Tarang

Answer 1

如果不需要透明度值，使用rgb代替rgba会使外观更加平滑。

演示: http://jsfiddle.net/tKtV9/

- stewe

---

当添加透明度时，绝对没有任何变化。尝试减少颜色范围 - 例如从白色到灰色渐变，你会看到条纹。 - Awol

Answer 2

我知道这篇文章已经发布很久了，但是我在使用Chrome 24时遇到了同样的问题（强烈的条纹状），具体原因如下：

-webkit-radial-gradient(center, ellipse cover,  #XXXXXX 0%,#YYYYYY 100%);

但我意识到使用以下代码后，条带几乎消失了：

-webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY));

希望这可以帮助到你。

编辑：我发现-webkit-gradient(radial, ...)只是径向渐变显示的旧语法，因此它不应该是解决该问题的长期答案...

- Florent Vielfaure

---

哎呀，这个答案已经不再适用了。:( - Awol

Answer 3

在这种情况下，它并没有太大的帮助，但我注意到添加

width: x-value;
height: y-value;

有时候可以帮助。当然，X值和Y值是您的尺寸。

- Connor

---

你把它加在哪里了？我已经使用了高度和宽度（就像在 jsfiddle 中一样 - 我只是将其放在 div 中而不是 css 中）。 - Tarang

是的，就像你所做的那样。但是，例如将渐变添加到html或body时，我注意到设置宽度/高度有助于使渐变更加平滑。 - Connor