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

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上检查设计时，颜色已经关闭（而不是一点点）。

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

有什么方法可以缓解这个问题吗？我想让渐变呈现相同的效果 在每个支持它们的浏览器上。

我可以使用特定于Chrome的黑客攻击吗？ 我可以从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/