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