固定镀铬颜色相对于其他浏览器或反之亦然

Question

我使用梯度的组合，以实现一个HTML页面上的一个特殊的背景效果：

// css, prefixed before use 
background-image: 
    radial-gradient(60% -5%, circle, rgba(75,230,195,0.6), transparent), 
    radial-gradient(80% 80%, circle, rgba(255,255,0,0.9), transparent), 
    radial-gradient(-5% 20%, circle, #f3774d, transparent);     

虽然在Chrome开发我设法得到它看起来和我想要的完全一样，但是当我在Safari和Firefox上检查设计时，颜色已关闭（而不是一点点）。

这些屏幕显示我的意思（顶部是铬，底部的Safari/Firefox浏览器）：

有什么办法来缓解这个问题呢？我希望在每个支持它们的浏览器上使渐变呈现相同的 。

是否有铬特定的黑客我可以使用？ 我可以从css设置一个标志？

Answer 1

这是Firefox和Safari处理关键字transparent时的缺陷。他们把它同rgba(0,0,0,0)，这样的颜色，例如，第二次运行

radial-gradient(80% 80%, circle, rgba(255,255,0,0.9), transparent), 

从黄色变为黑色。 （当然，黑色是在年底完全透明的，但中途梯度它更像是暗灰色。）

所以，你应该做的是改变transparent第一颜色的透明版本，在这种情况下

radial-gradient(80% 80%, circle, rgba(255,255,0,0.9), rgba(255,255,0,0)), 

我做了一个小提琴，其中顶部矩形具有transparent和底部一个具有RGBA值提到的，正如你所看到的，底部有一个在所有浏览器相同的色调。
http://jsfiddle.net/G9Lym/