firefox - Chrome 和 Firefox 之间的 CSS3 背景渐变问题

Question

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 中的样子有什么帮助吗？

Answer 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%);