Chrome和Firefox之间的CSS3背景渐变问题答案

【问题标题】：Issue with CSS3 background gradient between Chrome & FirefoxChrome和Firefox之间的CSS3背景渐变问题
【发布时间】：2012-04-24 20:31:33
【问题描述】：

background: -moz-linear-gradient(45deg,  rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%);
background: -webkit-linear-gradient(45deg,  rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%);

这两行相同，但产生不同的结果。您可以在此处查看正在制作的内容 (http://www.eprize.com/what-we-do/#mobile)。在 Chrome 中，一个显示两个 45 度灰色垂直条纹，而在 Firefox 中，一个流血覆盖整个图像，而不是第二个垂直条纹。

我花了一些时间在谷歌上搜索，但只找到了 CSS3 生成器的结果，这不是我想要的。有什么帮助让 Firefox 在 Safari 和 Chrome 中看起来像这样吗？

【问题讨论】：

标签： firefox google-chrome css safari

【解决方案1】：

问题在于 Firefox 坚持所有色标的起点和终点。最后和第 5 个颜色停止应该使渐变的其余部分透明，但没有。这是修复。

background: -moz-linear-gradient(45deg, rgba(92, 92, 92, 0.95) 0%, rgba(92, 92, 92, 0.65) 45%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.25) 47%, rgba(0, 0, 0, 0) 47%), rgba(0, 0, 0, 0) 100%);

【讨论】：