11

我正在使用chrome 18.0.1025.162并且正在尝试做一个径向渐变

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

问题是渐变是非常像素化的，颜色和 alpha 的过渡是块状的并且不平滑。这在 Safari 和 Firefox 中是不同的。Safari & Firefox 做得非常顺利

这是chrome的错误吗？任何人都有同样的问题。它是如此简单的渐变！这么简单的事情肯定不会是小故障

查看：http: //jsfiddle.net/GyRLe/1/了解我的意思的演示。

有解决方案吗？图像会很糟糕:(

（好吧，看看平滑度有多差）：这是我使用它时得到的：http: //i.imgur.com/UYB1d.png（Chrome）
http://i.imgur.com/tzGuq。 png（Safari）（看起来有点前卫，但那是因为 png，否则它接近完美的平滑度）

Firefox 和 Safari 一样好，它只是 chrome 做得很糟糕我需要 alpha，因为我在后台放了一个重复样式的图像

编辑：Chrome 20（Canary）也有这个可怕的问题！

Edit2：我们使用 CSS 的原因是我们不必使用图像！因此，我已将此添加到http://code.google.com/p/chromium/issues/detail?id=123491并希望谷歌能够直截了当，因为我认为 chrome 很棒

4

3 回答 3

3

如果您不需要 alpha 值，使用rgb而不是rgba.

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

于 2012-04-14T21:43:45.303 回答
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, ...) 只是径向渐变显示的旧语法，所以它不应该是这个问题的长期答案......

于 2013-02-10T16:09:51.997 回答
0

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

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

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

于 2012-04-14T22:03:49.223 回答