css - 相对于其他浏览器修复 chrome 颜色，反之亦然

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 特定 hack？ 我可以从 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)),

我制作了一个 fiddle ，其中顶部矩形具有 transparent，底部矩形具有如前所述的 rgba 值，如您所见，底部矩形在所有浏览器中具有相同的色调。< br/> http://jsfiddle.net/G9Lym/